如何修复React Hooks中数组状态过滤时重复追加数据的问题

问题根因 #

• 你用array.includes(data)做引用相等判断：后续存入数组的是解构后的新对象{...data, active: true}，和原始dataList里的对象不是同一个引用，所以includes永远返回false，只会走追加逻辑，不会触发移除
• 高亮判断逻辑错误：你用itemsClicked[i]?.active匹配索引，但是itemsClicked是点击才追加的动态数组，索引和原始dataList的索引完全不对应，高亮匹配会混乱
• 原有样式写法错误：borderColor属性只能接收颜色值，你传入了完整的1px solid green边框规则，就算逻辑正确也不会显示边框

修复步骤 #

1. 把引用相等判断改成按唯一id判断元素是否已被选中
2. 追加元素时带上active: true字段
3. 高亮判断改为：从itemsClicked中查找是否存在和当前渲染项id一致的元素，存在就显示高亮
4. 修正边框样式的写法

修复后完整代码：

import { useState } from "react";

function App() {
  const [itemsClicked, setItemsClicked] = useState([]);
  const dataList = [
    { id: 1, name: "jake" },
    { id: 12, name: "edd" },
    { id: 13, name: "john" }
  ];

  const highlight = (data) => {
    setItemsClicked((array) => {
      // 按唯一id判断是否已选中
      const isExist = array.some(item => item.id === data.id);
      return isExist
        ? array.filter((x) => x.id !== data.id)
        : [...array, {...data, active: true}];
    });
  };

  return (
    <div>
      {dataList.map((item) => (
        <div
          key={item.id}
          style={{
            border: itemsClicked.some(clickItem => clickItem.id === item.id) ? "1px solid green" : "1px solid transparent"
          }}
        >
          <button onClick={() => highlight(item)}>HIGHLIGHT</button>
        </div>
      ))}
    </div>
  );
}

export default App;

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