React：map函数内调用已绑定函数提示undefined问题排查

嘿，这个问题我之前写React项目时也踩过坑，大概率是下面这几个原因之一，咱们挨个排查：

• map回调里的this指向跑偏了
  要是你在map里用了普通函数当回调，比如这样：

  this.state.imageList.map(function(image) {
    return <img src={image.url} onClick={this.imageClick} />
  })
  

  这时候map回调里的this根本不是你的组件实例，自然找不到imageClick方法。解决办法有三个，随便选一个就行：

  1. 把map的回调换成箭头函数，箭头函数会自动继承外层的this：

     this.state.imageList.map((image) => {
       return <img src={image.url} onClick={this.imageClick} />
     })
     

  2. 给map方法传第二个参数，直接指定回调里的this：

     this.state.imageList.map(function(image) {
       return <img src={image.url} onClick={this.imageClick} />
     }, this)
     

  3. 给普通回调函数手动bind this：

     this.state.imageList.map(function(image) {
       return <img src={image.url} onClick={this.imageClick} />
     }.bind(this))
     

• 函数绑定的姿势不对
  你说在constructor里绑定了函数，但有没有可能是绑定的时候没把新函数赋值回给实例？比如错误写法：

  constructor(props) {
    super(props);
    // 这里只调用了bind，但没把返回的绑定好的函数存起来
    this.imageClick.bind(this);
  }
  

  bind方法会返回一个新的绑定了this的函数，必须把它重新赋值给实例的属性才行：

  constructor(props) {
    super(props);
    this.imageClick = this.imageClick.bind(this);
  }
  

  另外，你也可以用class fields语法直接写箭头函数，省得在constructor里绑定，this会自动指向组件实例：

  imageClick = () => {
    // 这里的this稳稳指向组件实例
    console.log('图片被点击啦');
  }
  

• 调用函数时的写法出错
  要是你在onClick里直接写了onClick={this.imageClick(this)}，这会导致组件一渲染就立刻执行函数，而且还会覆盖掉之前绑定的this。正确的传参方式应该是这两种：

  1. 用箭头函数包裹，按需传参：

     onClick={() => this.imageClick(image)}
     

  2. 用bind传参（注意顺序：先传this，再传你要的参数）：

     onClick={this.imageClick.bind(this, image)}
     

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