如何通过功能组件在对象的多维数组中执行setState

import React, { useState } from 'react';

function MyComponent() {
  const [data, setData] = useState({
    array: [
      { id: 1, value: 'A' },
      { id: 2, value: 'B' },
      { id: 3, value: 'C' }
    ]
  });

  const updateArray = () => {
    setData(prevState => {
      // 使用map方法遍历多维数组，并返回更新后的元素
      const newArray = prevState.array.map(item => {
        if (item.id === 2) {
          // 更新特定元素的值
          return { ...item, value: 'D' };
        }
        return item;
      });

      // 返回新的状态对象，更新多维数组
      return { ...prevState, array: newArray };
    });
  };

  return (
    <div>
      <button onClick={updateArray}>更新数组</button>
      <ul>
        {data.array.map(item => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;