React中如何防止向列表添加重复项？现有重复校验逻辑不生效如何解决

问题原因 #

• players数组存储的是包含id、nummer属性的对象，Array.includes()对引用类型数据执行全等匹配，你传入的字符串newScorer和数组内的对象永远不可能相等，判断逻辑永远返回false，因此即便值重复也会执行添加操作。

修复方案 #

将存在性判断逻辑替换为Array.some()，遍历数组匹配对象的nummer属性是否和待添加值相等即可，修复后代码如下：

const submitHandler = (e) => {
  e.preventDefault();
  const newScorer = e.target.value;
  // 遍历匹配对象内的nummer属性
  const existingScorer = players.some(player => player.nummer === newScorer);

  if (existingScorer) {
     console.log('already on list!');
     // 如需前端用户可见提示，可在此处替换为对应UI提示逻辑
  } else {
    const newPlayer = {id: nanoid(4), nummer: newScorer};
    setPlayers([...players, newPlayer]);
    setNumber('');
  }
};

额外注意事项 #

• 如果你已经把表单值绑定到了number状态变量，建议统一使用number做判断和赋值，避免e.target.value和number值不一致导致的逻辑异常。
• 如果players中nummer存储的是数字类型，表单获取的value默认是字符串类型，需要先做类型转换再对比，例如player.nummer === Number(newScorer)，避免类型不一致导致判断失效。

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