React读取IconButton的data属性返回undefined问题排查

打印值无规律在undefined和正确帖子ID之间切换的核心原因，是混淆了event.target与event.currentTarget的DOM指向规则。

你使用的IconButton是封装组件，内部包含星星图标、点赞数文本多个子节点。点击事件触发时：

• 若点击位置刚好落在按钮外层容器上，event.target指向挂载了data-targetpost属性的按钮元素，可以正常读取到ID
• 若点击位置落在内部的星星图标、数字文本等子元素上，event.target指向的是没有挂载data-targetpost属性的子节点，就会返回undefined

多次点击同一按钮返回结果不一致，本质是每次点击命中的DOM子节点位置不同，和数据逻辑、列表渲染逻辑无关。

以下两种方案均可解决问题，推荐优先使用第二种符合React开发范式的写法。

方案1：替换事件对象属性 #

将回调中的event.target替换为event.currentTarget，该属性永远指向绑定onClick事件的DOM节点（即你设置了data-targetpost的IconButton本身），不会随点击位置变化：

function starClickHandler(event) {
  console.log(event.currentTarget.dataset.targetpost);
  setStarsToggle((prev) => !prev);
}

方案2：通过闭包直接传值（推荐） #

完全摒弃从DOM dataset读值的思路，利用React闭包特性直接把当前帖子ID传入回调，从根源规避DOM指向问题，后续组件DOM结构调整也不会影响逻辑：
首先修改按钮的事件绑定：

<IconButton
  className="starsButton"
  onClick={() => starClickHandler(props.post._id)}
>
  {starsToggle ? <StarIcon /> : <StarBorderIcon />}
  {props.post.stars.length}
</IconButton>

对应调整点击回调：

function starClickHandler(postId) {
  console.log(postId);
  setStarsToggle((prev) => !prev);
  // 后续点赞请求逻辑可以直接使用postId，无需再操作DOM
}

内容的提问来源于stack exchange，提问作者filroy-codes