如何在react组件状态下修改对象中数组

import React, { useState } from 'react';

function MyComponent() {
  const [myArray, setMyArray] = useState([]);

  // 其他组件代码...

  return (
    // 组件渲染内容...
  );
}

function MyComponent() {
  const [myArray, setMyArray] = useState([]);

  const updateArray = () => {
    // 创建一个新的数组副本
    const newArray = [...myArray];

    // 修改数组内容
    newArray.push('新元素');

    // 更新状态
    setMyArray(newArray);
  };

  return (
    <div>
      <button onClick={updateArray}>添加元素</button>
      {/* 其他组件渲染内容 */}
    </div>
  );
}

function MyComponent() {
  const [myArray, setMyArray] = useState([
    { id: 1, name: '元素1' },
    { id: 2, name: '元素2' },
    { id: 3, name: '元素3' }
  ]);

  const updateArray = () => {
    // 创建一个新的数组副本，并修改特定元素
    const newArray = myArray.map(item => {
      if (item.id === 2) {
        return { ...item, name: '修改后的元素2' };
      }
      return item;
    });

    // 更新状态
    setMyArray(newArray);
  };

  return (
    <div>
      <button onClick={updateArray}>修改元素</button>
      {/* 其他组件渲染内容 */}
    </div>
  );
}