React中onClick传递map唯一ID时出现undefined问题求助

问题核心是变量名冲突：你在data.map((e) => ...)里把数组项命名为e，但按钮的onClick={(e) => ...}又把事件对象也命名为e，内层的事件对象e直接覆盖了外层的数组项e，导致e._id访问的是事件对象的_id属性（这个属性不存在，所以输出undefined）。

解决方法很简单，把map回调里的数组项变量名改成其他名称，比如item：

修改后的map渲染代码：

{data.map((item) => ( 
  <li key={item._id}> 
    <button
      onClick={(e) => onSubmit(e, item._id)}
      className="btnx btn-primary"
    >
      Book Now logout
    </button> 
  </li> 
))}

你的onSubmit函数无需改动，现在val会正确接收每个项的_id，event.preventDefault()也能正常执行，console.log(val)就能输出预期的唯一ID了。

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