React中子组件调用父组件回调失败，报错Cannot read property 'logMessage' of undefined

这个问题我之前也踩过坑，核心原因是你在map方法里使用普通函数作为回调时，this的指向已经不再是父组件的实例了，所以当你在callBack={() => this.logMessage()}里尝试调用this.logMessage时，自然会找不到这个方法。

下面给你几个可行的解决方案：

方案1：将map的回调换成箭头函数 #

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是父组件实例），这样就能正确访问到logMessage方法：

return(
  <div>
    <h1>Blogs</h1>
    {this.state.campaigns.map((blog) => { // 这里替换成箭头函数
      return (
        <div key={blog._id}>
          <CampaignCard blog={blog} callBack={() => this.logMessage()} />
        </div>
      );
    })}
    <Link to="/campaigns/add">
      <button>Add Blog</button>
    </Link>
  </div>
);

方案2：给map传入第二个参数指定this指向 #

如果你更习惯用普通函数，可以在map方法的第二个参数位置传入父组件的this，强制指定回调函数的this指向：

return(
  <div>
    <h1>Blogs</h1>
    {this.state.campaigns.map(function(blog) {
      return (
        <div key={blog._id}>
          <CampaignCard blog={blog} callBack={() => this.logMessage()} />
        </div>
      );
    }, this)} {/* 这里传入父组件的this */}
    <Link to="/campaigns/add">
      <button>Add Blog</button>
    </Link>
  </div>
);

方案3：提前缓存父组件的this #

在render方法开头把父组件的this存到一个变量里，比如that，然后在map的回调里用这个变量来访问父组件的方法：

render() {
  const that = this; // 缓存父组件的this
  return(
    <div>
      <h1>Blogs</h1>
      {this.state.campaigns.map(function(blog) {
        return (
          <div key={blog._id}>
            <CampaignCard blog={blog} callBack={() => that.logMessage()} /> {/* 使用that代替this */}
          </div>
        );
      })}
      <Link to="/campaigns/add">
        <button>Add Blog</button>
      </Link>
    </div>
  );
}

另外，你的子组件代码是没问题的：

onConfirm={() => {
  this.setState({ show: false });
  this.props.callBack();
}}

只要父组件的this指向正确，子组件调用this.props.callBack()就能正常触发父组件的logMessage方法。

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