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响应中收到的数据更新候选组件。但是，我在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>
      );
    }
}

这里发生的事情大致是：

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

More

Answer 2

我认为最好的方法是在App Component中调用API，然后将该函数作为prop传递给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;

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

3 个答案: