Question

我使用react v16.0.0-alpha.6和react-native v0.44.2。

我遇到了太奇怪的情况。

使用以下代码更改状态。这是预期的结果。没关系。

// current this.state.searchInputValue is 'q' 
// coming searchInputValue is 'a' 
_handleSearchInputValueChanged = (searchInputValue) => {
    this.state.searchInputValue = searchInputValue
    // here searchInputValue of the state is 'a'
}

使用以下代码更改状态。这也是预期的结果。没关系。

// current this.state.searchInputValue is 'q' 
// coming searchInputValue is 'a' 
_handleSearchInputValueChanged = (searchInputValue) => {
    setTimeout(()=>this.setState({ searchInputValue }))
    // after running the setTimeout and async setState methods
    // searchInputValue of the state is 'a' 
}

然而setState的这种正常用法不起作用

// current this.state.searchInputValue is 'q'
// coming searchInputValue is 'a'
_handleSearchInputValueChanged = (searchInputValue) => {
    this.setState({ searchInputValue })
    // after running async setState method
    // searchInputValue of the state is still 'q' 
}

我想知道有没有机会克服这个问题？

修改

我编辑了我的解释，以便轻松地展示我的问题。 setState操作不会抛出任何错误。只有它不会改变状态道具的当前值。

在遇到此问题的组件中，调用两个eventListener和几个setState取决于他们的工作。即使{on {and} on on setState方法被调用，所有这些方法也应正确运行。 setState只是一个功能。

目前，我必须使用setTimeout(()=>this.setState({ searchInputValue }))作为解决方法。

这是迄今为止我遇到的React-Native上最奇怪的问题：）

如果有任何问题，我会检查React和React-Native repos。我一无所获。

我还将React升级为16.0.0-alpha.12，将React-Native升级为0.46.4。不幸的是，问题还在继续。

Answer 1

你认为“正常”的前两个例子都是非常糟糕的做法。

您不应该使用直接分配（即this.state.* = ...）
setState已经是一个异步操作，没有理由/好处被包含在setTimeout电话中。

如果您尝试更改组件状态的一部分并使用其余现有值重新填充，则使用此函数的备用定义：

_handleSearchInputValueChanged = (searchInputValue) => {
  this.setState((prevState, props) => ({
    ...prevState,
    searchInputValue
  }))
}

如果您尝试在setState之后执行操作，则可以在callback参数后提供updater参数。您可以在setState文档中查看此示例。考虑setState是异步的，您需要使用回调或组件的componentDidUpdate生命周期方法在更新后立即对状态执行操作。

setState不会对组件状态

修改

1 个答案: