Передать ответ об успешном получении дочернего компонента

Question

У меня есть два компонента parent и child.

Я передаю функцию обратного вызова дочернему компоненту следующим образом.

<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 запрос на получение определенногоfile, а затем вызывается функция handleResults .

Я хочу передать результаты дочерним компонентам, есть ли способ добиться того же?

Я знаю, яможет переместить весь fetch вызов самого ребенка, но я не хочу этого делать, потому что функция обратного вызова будет изменяться в зависимости от родительского компонента, и поэтому я хочу, чтобы он был настраиваемым.

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
   }
}