React父子组件数组传递：子组件过滤后返回更新数组问题

原代码存在的问题 #

• props传递不匹配：Parent传的是todoList，但Child接收的是todoData，导致Child拿不到正确数据
• 状态管理错误：Child私自维护数组状态，删除操作无法同步到Parent的数组，页面不会更新
• 渲染逻辑错误：在Parent的循环里渲染整个Child组件，每个todo项都重复显示所有删除按钮
• 数据取值错误：Child里用obj.props.id取id是错误写法，数组元素直接取obj.id即可

修改后的Parent组件 #

import { useState } from 'react';
// 请自行导入check图片和Child组件

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);

  // 父组件定义删除逻辑，统一管理数组状态
  const handleDelete = (id) => {
    const newArray = myArray.filter(item => item.id !== id);
    setMyArray(newArray);
  };

  return (
    <div className="todomain">
      {myArray.map((obj) => {
        return (
          <div className="todobox" key={obj.id}>
            <div className="checkcont">
              <img src={check} alt="Check" className='chkbtn btn' />
            </div>
            <h2 className="head">Todo: {obj.todoname}</h2>
            <h3 className="todocont">{obj.todotoday}</h3>
            <div className="todoboxbtn">
              {/* 给Child传递当前todo的id和删除回调 */}
              <Child todoId={obj.id} onDelete={handleDelete} />
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default Parent;

修改后的Child组件 #

// 请自行导入del图片

const Child = ({ todoId, onDelete }) => {
  return (
    <div className="todoicon">
      <div className='todobtn'>
        <img 
          src={del} 
          alt="Delete" 
          className='deleteBtn btn' 
          onClick={() => onDelete(todoId)} 
        />
      </div>
    </div>
  );
};

export default Child;

核心修改说明 #

• 把数组状态统一放在Parent管理，确保数据唯一来源，删除操作后能同步更新页面
• Child不再需要接收整个数组，只接收当前todo的id和父组件的删除回调，点击按钮时触发回调通知父组件执行删除
• 每个todo项只渲染一个Child（对应一个删除按钮），解决了重复渲染的问题

内容的提问来源于stack exchange，提问作者Akash Kr. Das