使用UseState更新对象数组项

import React, { useState } from "react";

function App() {
  const [items, setItems] = useState([
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" }
  ]);

  const updateItemName = (itemId, newName) => {
    setItems((prevItems) => {
      // 创建一个新的数组副本
      const newItems = [...prevItems];
      
      // 更新特定项的属性
      const itemIndex = newItems.findIndex((item) => item.id === itemId);
      if (itemIndex !== -1) {
        newItems[itemIndex] = { ...newItems[itemIndex], name: newName };
      }
      
      return newItems;
    });
  };

  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>
          {item.name}{" "}
          <button onClick={() => updateItemName(item.id, "New Name")}>
            Update
          </button>
        </div>
      ))}
    </div>
  );
}

export default App;