ReactJS点击元素时向数组添加唯一不重复对象的实现方法

点击同一元素两次时，对应对象会被重复添加两次到目标数组中，需要实现仅向数组内添加唯一不重复元素的逻辑。

const handleClick = (
    id: number,
    name: string | null,
    avatar: string | null
  ) => {
    setListChoose((prevState: any) =>
      [...prevState].concat({ id, name, avatar })
    );
  };

核心逻辑：以元素的id作为唯一判定标识，新增元素前先检查数组中是否已存在同id的项，存在则直接返回原数组不做新增，不存在才追加新元素。
修复后代码：

const handleClick = (
  id: number,
  name: string | null,
  avatar: string | null
) => {
  setListChoose((prevState: Array<{id: number, name: string | null, avatar: string | null}>) => {
    // 校验当前项是否已在选中列表中
    const hasExisted = prevState.some(item => item.id === id);
    if (hasExisted) return prevState;
    return [...prevState, { id, name, avatar }];
  });
};

代码说明 #

• 用数组some()方法遍历已有选中项，只要匹配到相同id的项就判定为重复、终止遍历，性能比全量遍历更好
• 移除了冗余的concat写法，直接用扩展运算符即可实现数组追加，代码更简洁
• 替换了原代码中不安全的any类型，补充了明确的数组成员类型定义，降低后续类型报错风险

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