Question

我有父母和孩子两个部分。

我正在将回调函数传递给子组件，像这样。

<ChildComponent onFetchRecords={this.onFetchRecords} />

在子组件内部，我这样调用此回调函数。

this.props.onFetchRecords && this.props.onFetchRecords(0, 20).then(x => {
                // some code
            });

在我的父组件函数主体上如下所示：

    onFetchRecords(){
        return Client.sendJsonRequest("", "Records.json", "GET", "", "", this.handleResults, this.handleError, true, this.handleHttpError, "Reports");
      }

     handleResults(response){

     }

因此您可以看到 onFetchRecords 发出fetch请求以获取特定文件，然后调用回调函数 handleResults 。

我想将结果传递给子组件，有没有办法实现相同的目的？

我知道，我可以将整个fetch调用移到child本身，但是我不想这样做，因为回调函数将基于父组件不断变化，因此我希望它是可配置的。 / p>

Answer 1

您可以不依赖于向您传递更新结果的承诺，而可以使用道具将数据传递给孩子。

使孩子喜欢

<ChildComponent onFetchRecords={this.onFetchRecords}  records={this.state.records}/>

并在子级调用onFetchRecords

this.props.onFetchRecords && this.props.onFetchRecords(0, 20);

现在，您在父级中的提取请求就像

  onFetchRecords(){
    return Client.sendJsonRequest("", "Records.json", "GET", "", "", this.handleResults, this.handleError, true, this.handleHttpError, "Reports");
  }

 handleResults(response){
      this.setState({records: response});
 }

现在在子组件中，如果您想对道具更改采取一些措施，则可以实施componentDidUpdate method

componentDidUpdate(prevProps) {
   if(!_.isEqual(this.props.records, prevProps.records)) {
      // write your code here
   }
}

将获取成功响应传递给子组件

1 个答案: