React中父子组件数据传递与状态同步：实现子组件操作父组件列表数据更新

// 原始错误的Child组件片段
const Child = ({todoData}) =>{
    // 问题所在：在子组件中创建了独立状态，并用父组件的props初始化
    const [myArray,setmyArray] = useState(todoData); 

    const removeElm = (id) =>{
        const myNewArray = myArray.filter((currElm)=>{
            return currElm.id !== id;
        })
        setmyArray(myNewArray); // 只更新了子组件的局部状态
    }

    return (
        <div className="todoicon">
        {
            myArray.map((obj)=>{ // 渲染的是子组件的局部状态
                // ... 删除按钮点击时调用removeElm ...
            })
        }
        </div>
    );
}

import React, { useState } from 'react';
// 假设 check 和 del 是图片资源
import check from './check.png'; 
import del from './delete.png'; 

// 模拟待办事项数据
const todoData = [
  { id: 0, todoname: '学习', todotoday: '今天完成CSS学习' },
  { id: 1, todoname: '编程', todotoday: 'Leetcode 2道题目' },
];

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

  return (
    <div className="todomain">
      {myArray.map((obj) => (
        <div className="todobox" key={obj.id}>
          <div className="checkcont">
            @@##@@
          </div>
          <h2 className="head">Todo: {obj.todoname}</h2>
          <h3 className="todocont">{obj.todotoday}</h3>
          <div className="todoboxbtn">
            {/* 将整个列表和父组件的设置函数传递给Child */}
            <Child todoList={myArray} changeToDo={setmyArray} />
          </div>
        </div>
      ))}
    </div>
  );
};

export default Parent; // 导出Parent组件

import React from 'react';
// 假设 del 是图片资源
import del from './delete.png'; 

const Child = ({ todoList, changeToDo }) => {
  // 当删除按钮点击时，通过调用父组件的设置函数来更新父组件的状态
  const removeElm = (id) => {
    const myNewArray = todoList.filter((currElm) => currElm.id !== id);
    changeToDo(myNewArray); // 直接调用父组件的设置函数更新状态
  };

  return (
    <div className="todoicon">
      {/* 子组件直接渲染从props接收的todoList */}
      {todoList.map((obj) => (
        <div className='todobtn' key={obj.id}>
          {/* 注意：原始代码中obj.props.id是错误的，应直接使用obj.id */}
          @@##@@ removeElm(obj.id)} />
        </div>
      ))}
    </div>
  );
};

export default Child; // 导出Child组件

import React, { useState } from 'react';
import Child from './Child'; // 确保Child组件已正确导入
import check from './check.png'; 

const todoData = [
  { id: 0, todoname: '学习', todotoday: '今天完成CSS学习' },
  { id: 1, todoname: '编程', todotoday: 'Leetcode 2道题目' },
];

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

  // 删除元素的逻辑完全由父组件处理
  const removeElm = (id) => {
    const myNewArray = myArray.filter((currElm) => currElm.id !== id);
    setmyArray(myNewArray);
  };

  return (
    <div className="todomain">
      {myArray.map((obj) => (
        <div className="todobox" key={obj.id}>
          <div className="checkcont">
            @@##@@
          </div>
          <h2 className="head">Todo: {obj.todoname}</h2>
          <h3 className="todocont">{obj.todotoday}</h3>
          <div className="todoboxbtn">
            {/* 传递一个特定的回调函数，子组件只需调用它 */}
            <Child onDelete={() => removeElm(obj.id)} /> 
          </div>
        </div>
      ))}
    </div>
  );
};

export default Parent;

import React from 'react';
import del from './delete.png'; 

export const Child = ({ onDelete }) => {
  return (
    <div className="todoicon">
      <div className="todobtn">
        @@##@@
      </div>
    </div>
  );
};

export default Child; // 导出Child组件