React 父子组件间数组状态管理的最佳实践：实现子组件操作父组件数据过滤

// Parent 组件（简化版）
import React, { useState } from 'react';

const Parent = () => {
  const todoData = [
    {id:0, todoname:"Study", todotoday:"Completing CSS today"},
    {id:1, todoname:"Coding", todotoday:"Leetcode 2 Problems"}
  ];
  const [myArray, setmyArray] = useState(todoData);

  return (
    <div className="todomain">
      {myArray.map((obj) => (
        <div className="todobox" key={obj.id}>
          {/* ...其他内容... */}
          {/* 这里将整个数组传递给 Child，并且 Child 内部会再次管理这个数组的状态 */}
          <Child todoList={myArray} /> 
        </div>
      ))}
    </div>
  );
};

// Child 组件（简化版，试图在子组件内部过滤并管理状态）
import React, { useState } from 'react';

const Child = ({ todoList }) => {
  // 在子组件中复制父组件的状态，这是问题的根源
  const [myArray, setmyArray] = useState(todoList); 

  const removeElm = (id) => {
    const myNewArray = myArray.filter((currElm) => currElm.id !== id);
    setmyArray(myNewArray); // 这只会更新子组件内部的 myArray，父组件的状态不会改变
  };

  return (
    <div className="todoicon">
      {myArray.map((obj) => ( // 遍历子组件内部的 myArray
        <div className='todobtn' key={obj.id}>
          <button onClick={() => removeElm(obj.id)}>删除 {obj.id}</button> 
        </div>
      ))}
    </div>
  );
};

export default Parent;

// Parent.jsx
import React, { useState } from 'react';
import Child from './Child'; // 假设Child组件在单独的文件中

const todoData = [
  { id: 0, todoname: 'Study', todotoday: 'Completing CSS today' },
  { id: 1, todoname: 'Coding', todotoday: 'Leetcode 2 Problems' },
];

const Parent = () => {
  const [myArray, setmyArray] = useState(todoData);

  return (
    <div className="todomain">
      {myArray.map((obj) => (
        <div className="todobox" key={obj.id}>
          {/* ...其他内容... */}
          <h2 className="head">Todo: {obj.todoname}</h2>
          <h3 className="todocont">{obj.todotoday}</h3>