使用React删除待办列表项的功能实现咨询

要实现待办项删除功能，需要通过父子组件传参的方式完成，逻辑如下：

删除逻辑由持有整个待办列表的父组件实现，子组件仅需要通过props接收删除回调，点击按钮时触发回调并传递当前待删除项的信息即可。
修改后的子组件代码：

import { Item } from '../../types/item';
import { useState } from 'react';

type Props = {
  item: Item,
  // 新增删除回调参数，接收当前要删除的item作为入参
  onRemove: (item: Item) => void
}

export const ListItem = ({ item, onRemove }: Props) => {
  const [isChecked, setIsChecked] = useState(item.done);

  return (
    <C.Container done={isChecked}>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={e => setIsChecked(e.target.checked)}
        />
        {/* 点击时触发传入的onRemove回调，传递当前item */}
        <button onClick={() => onRemove(item)}><img src="./remove" alt="删除"/></button>
      <label>{item.name}</label>
    </C.Container>
  );
}

父组件存储了完整的待办列表数组，只需要实现过滤逻辑，再把删除方法传给所有ListItem组件即可。父组件示例代码：

import { useState } from 'react';
import { Item } from '../../types/item';
import { ListItem } from './ListItem';

export const TodoList = () => {
  // 父组件存储完整待办列表，你的项目中可能从接口或者其他地方获取
  const [todoList, setTodoList] = useState<Item[]>([
    { id: 1, name: '学习React', done: false },
    { id: 2, name: '写待办列表', done: true }
  ]);

  // 实现删除逻辑，过滤掉id匹配的待办项
  const handleRemoveItem = (targetItem: Item) => {
    setTodoList(prevList => prevList.filter(item => item.id !== targetItem.id))
  }

  return (
    <div>
      {todoList.map(item => (
        <ListItem 
          key={item.id} 
          item={item} 
          // 把删除方法传给子组件
          onRemove={handleRemoveItem}
        />
      ))}
    </div>
  )
}

补充说明：如果你的Item类型没有唯一id字段，也可以用数组下标作为删除标识，这种情况下只需要把回调的入参改成下标即可，但是更推荐给每个待办项加唯一id，避免数组顺序变化时出现删错项的问题。

内容的提问来源于stack exchange，提问作者Saudo Unix