如何为react js中嵌套在列表中的字典设置状态？

import React, { useState } from 'react';

function App() {
  // 初始状态是一个包含字典的列表
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', value: 10 },
    { id: 2, name: 'Item 2', value: 20 },
    // 更多项...
  ]);

  // 更新特定字典的函数
  const updateItem = (id, newValue) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, value: newValue } : item
      )
    );
  };

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          <span>{item.name}: {item.value}</span>
          <button onClick={() => updateItem(item.id, item.value + 1)}>Increment</button>
        </div>
      ))}
    </div>
  );
}

export default App;

// 错误的做法
const updateItem = (id, newValue) => {
  items.forEach(item => {
    if (item.id === id) {
      item.value = newValue; // 直接修改了状态对象
    }
  });
  setItems(items); // 这不会触发React的状态更新
};

// 正确的做法
const updateItem = (id, newValue) => {
  setItems(prevItems =>
    prevItems.map(item =>
      item.id === id ? { ...item, value: newValue } : item
    )
  );
};