React State not updating before callback function executes (Version 16.4.1)

I have a react onChange method on a dropdown UI component (Custom react component, not standard HTML) which updates the state to the newly selected value when a user selects an item from the dropdown, then makes a callback to retrieve new data from an API based on this new state.

Despite the API call being in a callback, the state is always stale by 1 interaction, meaning if I select 1, it will make the API call with the relevant state variable set to 0 (default value), and if I then select 2, it makes the API call with the relevant state variable set to 1.

Usually this happens because the function being called is NOT a callback, but in this case it is so I am confused how the state remains stale.

I know there are not other functions firing as there are no ComponentDidUpdate calls or anything else to interfere with this process.

I have confirmed with console logging that the new value that the state is supposed to be set to is correct in the onChange function prior to setting state, and yet the state is not set to the new value in the callback function.

I didn't think this was possible and am stumped on what to try next to troubleshoot this, so any ideas on what this might be caused by are appreciated.

Edit: Here is code (Names genericized, some details excluded such as permission checking code etc.)

When this code executes due to the callback function being called, apiFieldValue is always stale as described, despite being in the callback from the onChange function. I cannot share significantly more than that since it is code that I do not have rights to distribute and as such cannot supply.

onChangeFunction (newValue) 
{
    this.setState({ stateValue: newValue}, this.ApiCallback())
}

ApiCallback (){
   var canMakeCall = this.state.hasPermissions,
       apiFieldValue = this.state.stateValue

   if (canMakeCall){
    let response = genericHttpClient.post("apiurl.com", {apiField: apiFieldValue, credentials: this.state.userCredentials})
...
}

}

</details>


# 答案1
**得分**: 0

状态在进行API调用之前不会更新。只需在进行调用时，像下面示例中所示，将新值传递给API，而不是传递状态。

另一个选项是使用`useEffect()`钩子。听起来您正在使用基于类的组件，所以如果这使您感到困惑，请不要担心。我已经提供了两种选项的代码。

```javascript
// 通过将值传递给回调函数
onChangeFunction(newValue) {
  this.setState({
    stateValue: newValue
  });
  ApiCallback(newValue);
}

ApiCallback(value) {
  var canMakeCall = this.state.hasPermissions;
  var apiFieldValue = value;

  if (canMakeCall) {
    // ...
  }
}

// 使用 useEffect() 钩子
onChangeFunction(newValue) {
  this.setState(prevState => ({ ...prevState, valueKey: newValue }));
}

useEffect(() => {
  ApiCallback();
}, [state.valueKey]);

ApiCallback() {
  var canMakeCall = state.hasPermissions;
  var apiFieldValue = state.valueKey;

  if (canMakeCall) {
    // ...
  }
}

希望这能帮助您解决问题。

// By passing a value to the callback
onChangeFunction(newValue) {
  this.setState({
    stateValue: newValue
  })
  ApiCallback(newValue)
}

ApiCallback(value) {
  var canMakeCall = this.state.hasPermissions,
    apiFieldValue = value

  if (canMakeCall) {
    ...
  }
}


// With useEffect() hook
onChangeFunction(newValue) {
  this.setState(prev => {...prev, valueKey: newValue})
}

useEffect(() => {
  ApiCallback();
}, [state.valueKey])

ApiCallback() {
  var canMakeCall = state.hasPermissions,
    apiFieldValue = state.valueKey

  if (canMakeCall) {
    ...
  }
}

答案2

得分: 0

看这个陷阱，以及下面的注意事项。

简而言之，在调用this.ApiCallback()时，状态尚未更新。

有各种变通方法，但如果你想在this.setState上使用回调参数，你需要给它一个函数，这样它会在稍后被调用：

this.setState({ stateValue: newValue}, () => this.ApiCallback())

this.setState({ stateValue: newValue}, () => this.ApiCallback())