React函数组件添加任务时自动触发handleDelete的原因排查

你的问题根源在这行代码：

<a onClick={handleDelete(key)}>X</a>

这里不是给onClick绑定点击事件的回调函数，而是直接执行了handleDelete(key)。每次组件重新渲染（比如添加任务后todos数组更新，触发组件重渲染），map循环里的handleDelete(key)都会被调用一次，所以点击添加按钮后，控制台会自动输出对应的id。

修复方法 #

有两种常用的方式解决这个问题：

方式一：用箭头函数包裹回调

把handleDelete包装成箭头函数，这样只有点击<a>标签时才会执行：

<a onClick={() => handleDelete(key)}>X</a>

方式二：让handleDelete返回一个函数

修改handleDelete，让它返回一个函数作为点击回调，这样onClick拿到的是函数引用，只有点击时才会执行内部逻辑：

const handleDelete = (id) => {
  return () => {
    console.log(id);
    // 这里可以编写实际的删除逻辑
  };
};

// JSX中直接传递函数引用即可
<a onClick={handleDelete(key)}>X</a>

额外优化建议 #

用数组的索引key作为删除标识并不推荐，当数组元素顺序变化时，索引会跟着改变，可能导致逻辑异常。建议给每个todo项添加唯一ID，比如：

// 修改添加任务的逻辑，给每个todo生成唯一id
const addTodos = (e) => {
  e.preventDefault();
  if (!val.trim()) return; // 避免添加空任务
  setTodos([...todos, { id: Date.now(), text: val }]);
  setVal("");
};

// map渲染时使用todo.id作为key和删除标识
{todos.map((todo) => (
  <div key={todo.id}>
    <li>{todo.text}</li>
    <a onClick={() => handleDelete(todo.id)}>X</a>
  </div>
))}

// 修改删除逻辑，根据id过滤数组
const handleDelete = (id) => {
  console.log(id);
  setTodos(todos.filter(todo => todo.id !== id));
};

内容的提问来源于stack exchange，提问作者jj-ammar