typescript 回调函数执行前React状态未更新(版本16.4.1)

goqiplq2 于 2023-04-07 发布在 TypeScript

关注(0)|答案(2)|浏览(107)

我在一个下拉UI组件（自定义react组件，而不是标准HTML）上有一个react onChange方法，当用户从下拉列表中选择一个项目时，它会将状态更新为新选择的值，然后根据这个新状态进行回调以从API中检索新数据。
尽管API调用处于回调中，但状态总是在1次交互时过时，这意味着如果我选择1，它将在相关状态变量设置为0（默认值）的情况下进行API调用，如果我选择2，它将在相关状态变量设置为1的情况下进行API调用。
通常发生这种情况是因为被调用的函数不是回调，但在这种情况下，它是如此，所以我感到困惑的状态保持陈旧。
我知道没有其他函数触发，因为没有ComponentDidUpdate调用或其他任何东西干扰这个过程。
我已经通过控制台日志确认了在设置状态之前，状态应该被设置为的新值在onChange函数中是正确的，但是在回调函数中状态没有被设置为新值。
我不认为这是可能的，我对下一步如何解决这个问题感到困惑，所以任何关于这可能是由什么引起的想法都很感激。
编辑：这里是代码（名称一般化，一些细节排除，如权限检查代码等）
当这段代码由于回调函数被调用而执行时，apiFieldValue总是如所描述的那样过时，尽管它在onChange函数的回调中。我不能分享更多，因为这是我没有分发权限的代码，因此不能提供。

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})
...
}

}

typescript

来源：https://stackoverflow.com/questions/75953289/react-state-not-updating-before-callback-function-executes-version-16-4-1

2条答案

按热度按时间

3vpjnl9f1#

在React文档中看到这个陷阱，以及下面的警告。
简而言之，当您调用this.ApiCallback()时，状态尚未更新。
有多种解决方法，但如果你想在this.setState上使用callback参数，你需要给予它一个函数，以便稍后调用它：

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

赞(0）回复(0）举报 2023-04-07

62lalag42#

在你调用API之前状态不会更新。当你调用时，只需传入newValue而不是状态，如下所示。
另一个选择是使用useEffect()钩子。听起来你是在使用基于类的组件，所以如果你感到困惑，不要担心。我已经包含了这两个选项的代码。

// 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) {
    ...
  }
}

赞(0）回复(0）举报 2023-04-07

我来回答

typescript 回调函数执行前React状态未更新(版本16.4.1)

2条答案

相关问题

热门标签

最新问答