React中map遍历传索引到点击处理函数时值为undefined的原因

你的onClick事件回调里重复声明了形参i，把外层map遍历作用域里的索引i覆盖了。
React的点击事件回调只会传入1个参数：就是事件对象e，根本不会传第二个参数。你写的(e:React.MouseEvent<HTMLDivElement>, i: number) => deleteHandler(e, i)里，第二个位置的i是回调函数自己的形参，事件触发时不会给这个形参传任何值，所以它的值就是undefined，你把这个值传给deleteHandler，自然拿到的就是undefined。

错误点拆解 #

你当前的事件绑定代码：

onClick={(e:React.MouseEvent<HTMLDivElement>, i: number) => deleteHandler(e, i)}

这里的i属于事件回调的内部形参，和外层map遍历拿到的索引重名了。根据JavaScript的作用域规则，函数内部的同名变量优先级更高，外层的索引i被直接屏蔽，你实际传入的是永远为undefined的回调形参。

修复代码 #

删掉onClick回调里多余的i形参声明，直接引用外层map作用域的索引即可：

{offers.map((o, i) => (
  <div key={i} className={classes['OffersList__item']}>
    <UIButton 
      type={'primary'} 
      onClick={(e: React.MouseEvent<HTMLDivElement>) => deleteHandler(e, i)}
    >
      <FaTrash/>
    </UIButton>
  </div>
))}

补充提示：如果你的offers列表会动态增删、调整顺序，不建议用遍历索引作为key值，最好用offer数据里的唯一业务id（比如offerId）作为key，避免出现列表渲染状态错乱的问题。

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