如何使用reactjs状态访问数组中项的数据？

import React, { useState } from 'react';

const App = () => {
  // 定义一个状态数组
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ]);

  // 定义一个函数来更新状态数组中的数据
  const updateItem = (id, newName) => {
    setItems(prevItems => {
      // 使用map方法遍历数组，找到需要更新的项
      return prevItems.map(item => {
        if (item.id === id) {
          // 返回一个新的对象，更新name属性
          return { ...item, name: newName };
        }
        return item;
      });
    });
  };

  return (
    <div>
      {/* 遍历状态数组，渲染每一项数据 */}
      {items.map(item => (
        <div key={item.id}>
          <span>{item.name}</span>
          {/* 使用输入框来更新项的名称 */}
          <input
            type="text"
            value={item.name}
            onChange={e => updateItem(item.id, e.target.value)}
          />
        </div>
      ))}
    </div>
  );
};

export default App;