ReactJS：子组件调用API后如何更新父应用状态？

不用非得把API调用移到App组件里，React里有标准的父子组件通信方案能帮你把SearchBar拿到的数据传给App，进而更新Candidate组件的内容，具体来说就是通过回调函数传递数据，我给你一步步拆解：

步骤1：在App组件里定义状态更新的回调方法 #

首先在App里写一个专门用来更新candidate状态的方法，然后把这个方法作为props传给SearchBar组件：

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      candidate: [],
      searchTerm: ''
    }
    // 绑定this，确保方法内部能正确访问App组件的state
    this.updateCandidateData = this.updateCandidateData.bind(this);
  }

  // 接收从SearchBar传来的API数据，更新App的state
  updateCandidateData(newCandidateData) {
    this.setState({
      candidate: newCandidateData
    });
  }

  render() {
    return (
      <div className="App">
        {/* 把回调方法作为props传给SearchBar */}
        <SearchBar onDataFetched={this.updateCandidateData} />
        <Candidate candidate={this.state.candidate}/>
      </div>
    );
  }
}
export default App;

步骤2：在SearchBar组件中调用回调传递数据 #

当你在SearchBar里调用openFEC API拿到数据后，直接调用从App传过来的onDataFetched方法，把数据传回去就行：

class SearchBar extends Component {
  // 示例：调用openFEC API的方法
  fetchCandidateData = async (searchTerm) => {
    try {
      // 替换成你的openFEC API实际请求地址（记得加上API密钥）
      const apiUrl = `https://api.open.fec.gov/v1/candidates/search?name=${searchTerm}&api_key=你的API密钥`;
      const response = await fetch(apiUrl);
      const candidateData = await response.json();
      
      // 调用父组件传来的回调，把数据传给App
      this.props.onDataFetched(candidateData.results || []);
    } catch (error) {
      console.error('获取候选人数据失败:', error);
      // 可以在这里处理错误，比如传递空数组或者错误提示
      this.props.onDataFetched([]);
    }
  }

  render() {
    return (
      <div className="search-bar">
        <input
          type="text"
          placeholder="搜索候选人..."
          onChange={(e) => this.fetchCandidateData(e.target.value)}
        />
      </div>
    );
  }
}
export default SearchBar;

额外说明：两种方案的选择 #

当然，把API调用移到App组件里也是可行的，这取决于你希望逻辑的组织方式：

• 如果搜索相关的逻辑（输入、API请求）更适合封装在SearchBar组件内，那上面的回调方案更合适；
• 如果希望把所有数据请求的逻辑统一放在父组件（App）中，那可以反过来：让SearchBar把搜索词传给App，由App发起API请求并更新状态。

两种方式都符合React的设计思路，选哪种看你的代码结构偏好就行。

内容的提问来源于stack exchange，提问作者youknownothingjoncho