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

import React from 'react';

function MyComponent() {
  // 组件逻辑
}

function MyComponent() {
  const existingList = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  const newList = [
    { id: 1, color: 'red' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'green' }
  ];

  // 组件逻辑
}

function MyComponent() {
  const existingList = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  const newList = [
    { id: 1, color: 'red' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'green' }
  ];

  const updatedList = existingList.map(item => {
    const newItem = newList.find(newItem => newItem.id === item.id);
    return { ...item, ...newItem };
  });

  // 组件逻辑
}

function MyComponent() {
  const existingList = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  const newList = [
    { id: 1, color: 'red' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'green' }
  ];

  const updatedList = existingList.map(item => {
    const newItem = newList.find(newItem => newItem.id === item.id);
    return { ...item, ...newItem };
  });

  return (
    <div>
      {updatedList.map(item => (
        <div key={item.id}>
          <span>{item.name}</span>
          <span>{item.color}</span>
        </div>
      ))}
    </div>
  );
}