React表单输入ID检测数组内ID存在性时返回false的问题

问题根源 #

核心问题是类型不匹配：

• 输入框的type="number"仅限制输入格式，但onChange事件中拿到的e.target.value依然是字符串类型
• 数组里的id是数字类型（1）
• 用===严格相等比较时，字符串"1"和数字1不相等，导致some方法返回false

解决方案 #

两种简单修复方式任选其一：

方式1：比较时将sid转为数字

修改updateArray函数的判断逻辑，把sid转成数字后再对比：

const updateArray = () =>{
  const isFound = myArray.some(el => el.id === Number(sid));
  console.log(isFound);
  if (isFound) {
    console.log('✅ array contains object with id = 1');
  }
}

方式2：存储sid时直接转为数字

修改handleID函数，把输入值转成数字后再存入状态：

const handleID = (e) => {
  setId(Number(e.target.value));
}

这样sid会以数字类型存储，和数组里的id类型一致，===比较就能得到正确结果。

验证效果 #

采用任意一种方式后，输入1点击按钮，控制台会输出true和✅ array contains object with id = 1，符合预期。

内容的提问来源于stack exchange，提问作者Akash Kr. Das