当我按下图标时，我希望我踩到的区域中的物质在React中消失

Question

const [todo,setTodo] = useState([]);
const removeTodo = id => {
const removedArr = [...todo].filter(item => item.id !== id);
setTodo(removedArr);
};


<div className="todoList">
{todo.map((item, index) => (
<div className="todoTarget" key={index}>
<span className="todoSpan">{index+1} - {item}</span>{" "}
<div>
<FaTimesCircle onClick={() => removeTodo(item.id)}/>
</div>
</div>
))}
</div>

我的代码片段是这样的，当我点击图标时，所有的项目都消失了，而不是我点击图标中的项目。原因是什么?我很感激你的帮助。

我试图用数组中的map函数冻结它，并用每个项目的id来解决它，但它们都消失了。

Answer 1

当您没有为列表中的每个对象提供唯一id时，通常会发生这种情况。

检查你的待办事项列表中的每个项目是否都有一个唯一的id，如果没有，那么添加一个。应该没问题。

检查我的例子与您的代码在这里:

https://codesandbox.io/s/serene-https-pyr1ie?文件=/sr