React代码中id与itemId始终不匹配的原因排查求助

我仔细看了你的代码逻辑，发现导致id === itemId条件始终不成立的核心问题是数据类型不匹配！

具体问题分析 #

你的列表项里的id是数字类型（比如1、2、3），但当你通过e.target.id获取点击元素的id时，DOM元素的id属性会自动返回字符串类型的值。这就造成了数字和字符串的全等比较永远为false——比如1 === "1"的结果是false，自然不会渲染对应的元素。

快速修复方案 #

这里有两种简单的修复方式，选一种就行：

方式1：将获取到的id转为数字类型

修改点击事件处理函数，把字符串类型的id转成数字后再存入状态：

const handleClick = (e) => {
  setItemId(Number(e.target.id));
};

方式2：比较时统一转为字符串类型

在渲染条件里把数字id转为字符串，和状态里的字符串id做比较：

{String(id) === itemId && el}

更稳妥的优化建议 #

其实你可以跳过DOM属性的类型问题，直接把id作为参数传给点击事件，代码更清晰也更不容易出错：

// 列表项的点击事件直接传入id
<li key={id} onClick={() => handleClick(id)}>{id}</li>

// 修改事件处理函数，直接接收id参数
const handleClick = (targetId) => {
  setItemId(targetId);
};

这种方式直接传递原始的数字id，完全避免了类型不匹配的问题，后续维护也更省心。

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