ReactJS中数组元素绑定点击事件失效问题求助

我来帮你排查这个问题，你的报错Cannot read property 'saveInStorage' of undefined主要有两个核心原因，咱们一步步解决：

1. 修复renderUser方法的this指向问题 #

当你用this.state.users.map(this.renderUser)调用renderUser时，这个方法里的this并没有指向组件实例，导致访问this.saveInStorage时出现undefined。这里有两种简单的解决方式：

方式一：在构造函数中绑定renderUser的this #

修改你的构造函数，给renderUser也加上this绑定：

constructor() {
  super();
  this.state = { users: data.users };
  this.saveInStorage = this.saveInStorage.bind(this);
  this.renderUser = this.renderUser.bind(this); // 新增这行绑定
}

方式二：在map调用时使用箭头函数 #

直接在map里用箭头函数来保留组件的this指向，不用修改构造函数：

render() {
  return ( <div> { this.state.users.map((user, i) => this.renderUser(user, i)) } </div> );
}

2. 修复点击事件的触发逻辑 #

你现在写的onClick={this.saveInStorage(user)}会在组件渲染时立刻执行saveInStorage，而不是点击的时候触发。需要用箭头函数包裹，让它成为点击时才执行的回调：

renderUser(user, i) {
  return( <p key={i} onClick={() => this.saveInStorage(user)}>f</p> );
}

同时，记得调整saveInStorage的参数，因为现在我们要传递的是user数据而不是事件对象e：

saveInStorage(user){
  console.log("test", user); // 现在可以正常拿到对应的user数据了
}

把这些修改完成后，你的代码就能正常运行，点击每个<p>标签时都会触发saveInStorage方法啦。

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