React内联箭头函数传参报错求助：为何传递idx会导致temp未定义？

嘿，这个问题其实是箭头函数参数作用域的小坑，我来给你讲明白为什么两种写法结果完全不同～

核心差异：箭头函数的参数覆盖了props值 #

先看两种写法的本质区别：

1. 正常工作的写法 #

<input type="button" value="Remove Person" onClick={() => removePerson(idx)}/>

这里的箭头函数没有定义任何参数，所以函数内部的idx直接引用的是组件props传入的索引值（也就是父组件传递的idx）。当按钮被点击时，React调用这个箭头函数，执行removePerson(idx)，此时传入的是正确的数字索引，removePerson里的index是有效的数组下标，自然能找到对应的person，temp有值，后续逻辑正常执行。

2. 报错的写法 #

<input type="button" value="Remove Person" onClick={(idx) => removePerson(idx)}/>

这里的箭头函数自己定义了一个名为idx的参数——而React在触发点击事件时，会把**点击事件对象（MouseEvent）**作为第一个参数传递给这个箭头函数。也就是说，你这里的idx已经不是props里的索引值了，而是事件对象！

当removePerson收到的是事件对象而不是数字索引时，updatedPersons[index]就会因为index不是有效的数组下标，返回undefined，所以temp变成undefined，后续执行temp.name就会抛出TypeError: temp is undefined。

你可以在removePerson里加一句console.log(index)验证：第二种写法会打印出一个MouseEvent对象，而不是你期望的数字。

解决方法 #

有两种简单的修复方式：

• 直接去掉箭头函数的参数，保持第一种写法的形式，让idx直接引用props的值；
• 如果需要用到事件对象，换个参数名避免覆盖，比如：

  <input type="button" value="Remove Person" onClick={(e) => removePerson(idx)}/>
  

  这里e是事件对象，idx依然是props传入的索引，互不干扰。

另外你也可以用bind来传参，写法如下：

<input type="button" value="Remove Person" onClick={removePerson.bind(null, idx)}/>

不过箭头函数的写法在React项目中更常用，可读性也更好。

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