ReactJS：从子组件更新父应用程序状态

Question

目前正在尝试通过创建一个从openFEC API中获取数据的简单应用程序来学习React。

我目前在我的应用程序中定义了两个组件，一个SearchBar和一个Candidate组件。 这就是我的App.js目前的样子：

class App extends Component { 
    constructor(props){
      super(props);

      this.state = { candidate: [], searchTerm: '' }
    }

    render() {
      return (
         <div className="App">
          <SearchBar />
          <Candidate candidate={this.state.candidate}/>
         </div>
      );
    }
}

export default App;

问题：我需要根据从API响应中收到的数据更新Candidate组件。 但是，我在SearchBar组件中进行API调用，无法更新App组件中定义的候选状态。

我应该在App组件中进行API调用吗？ 如果没有，有没有办法将我从SearchBar组件返回的数据发送到我的App组件？

Answer 1

您可以通过这种方式实现它（无需从App进行API调用）。

class App extends Component { 
    constructor(props){
      super(props);

      this.state = { candidate: [], searchTerm: '' }
      this.onDataReceived = this.onDataReceived.bind(this);
    }

    onDataReceived(data){
       this.setState({ candidate: data });
    }
    render() {
      return (
         <div className="App">
          <SearchBar onDataReceived={this.onDataReceived}/>
          <Candidate candidate={this.state.candidate}/>
         </div>
      );
    }
}

这里发生的大致是：

• 你可以看到我是如何通过onDataReceived props将一个函数作为道具传递给SearchBar组件的。
• 您可以从SearchBar组件中调用该函数（例如，将API调用和调用函数作为带有API结果的props传递）。
• 调用onDataReceived函数将触发setState
• 调用setState将调用render，现在Candidate组件将从state接收更多最新数据。

更多 。

Answer 2

我认为最好的方法是在App Component中调用API，然后将该函数作为propB传递给SearchBar组件。 您的父组件（在本例中为App）应该保留所有相关信息，并将其所需的内容传递给孩子。

它应该看起来像这样：

class App extends Component {
  ... 
  handleSearch(term) {
    //handle fetch here 
    .then(res => this.setState({candidate: res})
  }
  render() {
    <div className="App">
      <SearchBar handleSearch={this.handleSearch}/>
      <Candidate candidate={this.state.candidate}/>
     </div>
  }
}

Answer 3

通过这种方式，您可以实现这一目标

 class App extends Component { 
        constructor(props){
          super(props);
          this.state = { candidate: [], searchTerm: '' }
          this.triggerSearch=this.triggerSearch.bind(this);
        }

       triggerSearch(searchTerm){
            this.setState({searchTerm})
        }

        render() {
          return (
             <div className="App">
              <SearchBar trigerSearch=
             {(searchTerm)=>this.triggerSearch(searchTerm)} />
              <Candidate candidate={this.state.candidate}/>
             </div>
          );
        }
    }

    export default App;