React支出追踪器中如何实现条目删除功能？

基础实现（基于列表索引） #

1. 改写删除函数，让它接收要删除条目的索引参数：

const deleteHandler = (index) => {
  // 过滤掉对应索引的条目，生成新数组更新状态
  setList(prevList => prevList.filter((_, i) => i !== index));
};

2. 在删除按钮的点击事件中，传递当前条目的索引：

<button className='trash' onClick={() => deleteHandler(id)}>
  <FontAwesomeIcon icon={faTrash}/>
</button>

更稳健的实现（基于唯一ID） #

用列表索引做删除标识存在潜在问题（比如列表顺序变动时可能出错），建议给每个条目分配唯一ID：

• 添加条目时生成唯一ID：

// 假设你有添加条目的函数，修改为：
const addItem = () => {
  const newItem = {
    id: Date.now(), // 用时间戳生成唯一ID
    type: typeSelectedValue,
    amount,
    category,
    date
  };
  setList(prev => [...prev, newItem]);
};

• 基于ID编写删除函数：

const deleteHandler = (itemId) => {
  setList(prevList => prevList.filter(item => item.id !== itemId));
};

• 按钮点击事件传递条目ID：

<button className='trash' onClick={() => deleteHandler(data.id)}>
  <FontAwesomeIcon icon={faTrash}/>
</button>

内容的提问来源于stack exchange，提问作者h.m