无法在React

Question

我试图在父组件中调用回调函数，该函数在子组件内部触发。我已经尝试过不同的绑定方式，但我仍然无法让它工作。我总是得到这个错误。

Cannot read property 'logMessage' of undefined

我的父母

logMessage() {
    console.log("logMessage was called");
  }

return(
      <div>
        <h1>Blogs</h1>
        {this.state.campaigns.map(function(blog) {
          return (
            <div key={blog._id}>
              <CampaignCard blog={blog} callBack={() => this.logMessage()} />
            </div>
          );
        })}
        <Link to="/campaigns/add">
          <button>Add Blog</button>
        </Link>
      </div>
    );

我的孩子

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

我可以看到调用回调函数，但看起来this似乎没有引用正确的位置。

Answer 1

 {this.state.campaigns.map(function(blog) {
          return (
            <div key={blog._id}>
              <CampaignCard blog={blog} callBack={() => this.logMessage()} />
            </div>
          );
        })}

这是因为它位于map内， map您没有使用箭头功能。因此this指的是this内的map。 使用类似的东西：

render(){
let that = this;

.... // e.g. your map
    <CampaignCard blog={blog} callBack={() => that.logMessage()} />
...


}

Answer 2

一些选项中的两个

logMessage = () => {
   console.log("logMessage was called");
}

或

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

Answer 3

为>>> x = Popen(cmd, shell=True, stdout=PIPE, stderr=STDOUT, executable='/bin/bash') >>> x.communicate() ('U2FsdGVkX18SNFZ4AAAAAKJTAirWf4KnDHYXlIF/87Y=\n', None) 使用箭头功能：

map

否则，{this.state.campaigns.map((blog) => { return ( <div key={blog._id}> <CampaignCard blog={blog} callBack={() => this.logMessage()} /> </div> ); })} 引用this回调上下文。

Answer 4

您需要绑定父级中的函数：

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