Array.filter()无法过滤数组最后一项的React技术问题

你遇到的最后一项删了又自动恢复的问题，根源在监听regions变化的useEffect：
每次删除元素后，regions数组更新会触发useEffect执行。当删掉最后一项时，regions变成空数组，而此时region变量还保留着你最后添加的区域值，!regions.includes(region)条件成立，代码就会把这个区域重新加回数组，导致删完又恢复。

1. 拆分useEffect的添加与保存逻辑 #

原useEffect同时处理「添加区域」和「保存数据」，还把regions设为依赖项，导致数组变化时重复执行添加逻辑。拆分后避免循环触发：

// 只在region有新输入时处理添加（检查重复）
useEffect(() => {
  if (region) {
    setRegions(prevRegions => {
      // 用函数式更新获取最新数组状态，避免依赖当前regions
      if (!prevRegions.includes(region)) {
        return [...prevRegions, region];
      }
      return prevRegions;
    });
  }
}, [region]);

// 单独监听regions变化，同步保存数据
useEffect(() => {
  handleAddData("regions", regions);
}, [regions, handleAddData]);

2. 优化删除函数的可靠性 #

原来通过DOM的value属性获取要删除的区域，容易因为事件冒泡或DOM结构变化出问题，直接把区域值传给删除函数更稳妥：

修改删除函数 #

const onDelete = (regionToRemove) => {
  console.log("Click onDelete: ", regionToRemove);
  // 用函数式更新获取最新数组，避免闭包旧值问题
  setRegions(prevRegions => prevRegions.filter(item => item !== regionToRemove));
};

修改渲染代码 #

<ul>
  {regions.map((region) => (
    <li
      key={region}
      title="remove"
      onClick={() => onDelete(region)}
    >
      {region}
    </li>
  ))}
</ul>
{regions.length > 0 && <p>Click to remove</p>}

这样修改后，删除最后一项时添加逻辑不会被触发，也就不会出现删了又恢复的情况，同时删除操作也更稳定。

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