如何使用函数组件在react中基于另一个列表将新属性添加到JSON列表

import React from 'react';

const OriginalList = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const NewProperties = [
  { id: 1, age: 25 },
  { id: 2, age: 30 },
  { id: 3, age: 35 }
];

const App = () => {
  // 合并两个列表并添加新属性
  const mergedList = OriginalList.map(item => {
    const newProp = NewProperties.find(prop => prop.id === item.id);
    return { ...item, ...newProp };
  });

  return (
    <div>
      <h1>Merged List</h1>
      <ul>
        {mergedList.map(item => (
          <li key={item.id}>
            {item.name} - Age: {item.age}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

import React, { useMemo } from 'react';

const App = () => {
  const mergedList = useMemo(() => {
    return OriginalList.map(item => {
      const newProp = NewProperties.find(prop => prop.id === item.id);
      return { ...item, ...newProp };
    });
  }, [OriginalList, NewProperties]);

  // 渲染逻辑...
};