React中无法通过e.target.id传递<input>的ID至事件处理器的原因

你遇到的问题核心是类型不匹配：

• e.target.id 获取到的是字符串类型（比如输入框的id设为数字0，实际拿到的是字符串"0"）
• 而你state里的item.id是数字类型（0、1、2）

JavaScript的严格相等运算符===会同时比较值和类型，所以item.id === e.target.id会因为类型不同返回false，导致filter得到空数组，map里的更新逻辑也不会触发。

解决方案 #

把e.target.id转换为数字类型即可，修改handleChange函数：

function handleChange(e) {
  const itemId = Number(e.target.id); // 将字符串id转为数字
  console.log(itemId);
  const result = items.filter((item)=>item.id === itemId) 
  console.log(result) // 现在能正确匹配到对应item

  setItems(
    items.map((item) => {
      if (item.id === itemId) {
        return {
          ...item,
          title: e.target.value
        };
      } else {
        return item;
      }
    })
  );
}

为什么直接传递item.id可行？ #

当你用onChange={(e)=> handleChange(e, item.id)}时，传递的item.id是state里的数字类型，和目标item.id类型完全一致，所以===能正常匹配。

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