React：状态在API调用后才更新，如何在状态正确设置后调用API？

这个问题的核心原因很明确：React的setState是异步操作。你在filterChange函数里调用setState之后，立刻去访问this.state并调用getAllProcesses，这时候状态还没有完成更新，所以传给API的还是旧的filter值；而componentDidUpdate是在状态更新完成、组件重新渲染之后才触发的，所以那里能看到正确的最新状态。

下面给你两种靠谱的解决方法：

方法一：使用setState的回调函数 #

setState支持第二个可选参数——一个回调函数，这个函数会在状态更新完成、组件重新渲染后执行，此时你可以安全地拿到最新的状态值，并调用API。

修改你的filterChange函数如下：

filterChange(event) {
  const test = event.filter.filters[0];
  const value = test.value;
  this.setState(prevState => ({
    ...prevState,
    filter: {
      ...prevState.filter,
      query: {
        ...prevState.filter.query,
        filter: {
          ...prevState.filter.query.filter,
          JobId: value
        }
      }
    }
  }), () => {
    // 这个回调会在状态更新完成后执行
    console.log("最新的filter状态：", this.state.filter.query);
    this.props.getAllProcesses(this.state.filter);
  });
}

方法二：在componentDidUpdate中判断状态变化后调用API #

如果你的场景更复杂（比如多个状态变化都可能触发API调用），可以在componentDidUpdate里对比前后状态的变化，当目标状态确实更新时再调用API，避免不必要的请求。

修改你的componentDidUpdate：

componentDidUpdate(prevProps, prevState) {
  // 对比JobId是否发生变化
  if (prevState.filter.query.filter.JobId !== this.state.filter.query.filter.JobId) {
    console.log("状态已更新，调用API");
    this.props.getAllProcesses(this.state.filter);
  }
}

同时记得把filterChange里的this.props.getAllProcesses(this.state.filter)删掉，避免重复调用。

两种方法都能解决你的问题，第一种更直接针对当前场景，第二种更适合复杂的状态管理场景，你可以根据自己的需求选择。

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