React Todo应用添加removeHandler后触发Too many re-renders错误及咨询

一、修复"Too many re-renders"错误 #

你的代码里删除按钮的绑定写法有问题：

<button onClick={removeHandler(index)} style={{ color: "red" }}>
  X
</button>

这里你直接执行了removeHandler(index)，组件每次渲染时都会调用这个函数，而函数里的setListData会触发组件重新渲染，重新渲染又会再次调用removeHandler，形成无限循环，直接触发"Too many re-renders"错误。

两步修复： #

1. 修正点击事件绑定：把onClick改成传递匿名函数，只有点击时才执行删除逻辑：

<button onClick={() => removeHandler(index)} style={{ color: "red" }}>
  X
</button>

2. 修正删除逻辑：原来的filter判断里，remId是列表中的对象，而id是索引，对象和数字永远不相等，删除逻辑根本不会生效。改成按索引过滤：

const removeHandler = (index) => {
  const newlist = listData.filter((_, itemIndex) => itemIndex !== index);
  setListData(newlist);
};

更推荐的优化：不要用索引作为删除标识，因为列表项增删后索引会变化，容易出问题。可以给每个新增的项加唯一ID，比如时间戳：

const submitHandler = () => {
  setListData([
    ...listData,
    {
      id: Date.now(), // 新增唯一ID
      movie: movieData,
      director: directorData,
    },
  ]);
  setMovieData("");
  setDirectorData("");
};

对应的删除逻辑改成：

const removeHandler = (itemId) => {
  const newlist = listData.filter(item => item.id !== itemId);
  setListData(newlist);
};

渲染时传递item.id：

<button onClick={() => removeHandler(item.id)} style={{ color: "red" }}>
  X
</button>

二、除filter和splice外的列表删除方法 #

• slice + 展开运算符：通过slice截取删除项前后的数组片段，再合并成新数组：

const removeByIndex = (index) => {
  const newList = [...listData.slice(0, index), ...listData.slice(index + 1)];
  setListData(newList);
};

• reduce遍历累加：遍历数组，只保留不需要删除的元素：

const removeById = (itemId) => {
  const newList = listData.reduce((acc, item) => {
    if (item.id !== itemId) acc.push(item);
    return acc;
  }, []);
  setListData(newList);
};

• findIndex + 拆分合并：先找到目标项的索引，再拆分数组：

const removeById = (itemId) => {
  const targetIndex = listData.findIndex(item => item.id === itemId);
  if (targetIndex !== -1) {
    const newList = [
      ...listData.slice(0, targetIndex),
      ...listData.slice(targetIndex + 1)
    ];
    setListData(newList);
  }
};

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