Question

我需要将函数的checkSuggestionList值返回到this.state.validSearchParentInput。函数checkSuggestionList返回正确的值，但不会传递给this.state.validSearchParentInput。我相信setState在函数checkSuggestionList完成之前设置了值。

  checkSuggestionList = (newValue) => {
      for (let i = 0; i < nodes.length; i++ ) {
        let node = nodes[i].name
        console.log('node: ' , node)
        if (node.toLowerCase() === newValue.toLowerCase()) {
          console.log('did find case') 
          return true
        } else {
          console.log('didn\'t find case')
        }
        return false
      }
  }

  searchParents__onChange = (event, { newValue, method }) => {
    this.setState({
      validSearchParentInput: this.checkSuggestionList(newValue),
      searchParentsValue: newValue
    })
    this.checkProgress()
  }

Answer 1

React组件is not guaranteed to be synchronous的setState函数，但出于性能原因可能会异步执行。

您可能在应用更改之前阅读状态。

要解决此问题，您可以使用setState的第二个参数，它接受在状态转换后执行的回调函数：

this.setState({
  validSearchParentInput: this.checkSuggestionList(newValue),
  searchParentsValue: newValue
}, function() {
    this.checkProgress()
})

Answer 2

setState动作是异步的。这在setState的文档中有解释。（供参考：https://facebook.github.io/react/docs/react-component.html#setstate）

setState（）不会立即改变this.state，但会创建挂起状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState的调用进行同步操作，并且可以对调用进行批处理以获得性能提升。

React - 将函数值返回到setState

2 个答案: