if 语句中的 setState() 问题答案

【问题标题】：Issue with setState() in if statementif 语句中的 setState() 问题
【发布时间】：2016-09-16 12:28:48
【问题描述】：

if 语句中的 setState()：

// morePage = true
// pageNum = 1

if(morePage){
  this.setState({pageNum: this.state.pageNum+1})
}

console.log(this.state.pageNum); // return: 1

setState() out if 语句：

// morePage = true
// pageNum = 1

if(morePage){
  // ... 
}
this.setState({pageNum: this.state.pageNum+1})

console.log(this.state.pageNum); // return: 2

我现在正面临着这个问题，我想知道为什么......

谢谢:)

正确答案后编辑：

所以是的，我应该花更多时间阅读 React 的文档：P 如果有人有兴趣知道我最终是如何做到的，答案如下：

在文档中，他们说无法保证您的状态在重新渲染之前会有新的价值。所以你必须使用“componentDidUpdate()”。

所以我所做的是，我把：

this.setState({pageNum: this.state.pageNum+1})

在我创建的随机函数中，之后在“componentDidUpdate(prevProps, prevState)”函数中我可以访问新的和旧的道具值，在那里我可以使用“pageNum”的先前值和当前值" :)

【问题讨论】：

如果您不想为此使用额外的生命周期方法，您应该查看我的答案。
是的，你的答案也应该有效，但我的代码更大，而且我还有其他需要放在 componentDidUpdate() 中的东西，所以这是一个更干净的解决方案:)

标签： javascript reactjs react-native

【解决方案1】：

setState() 不会立即改变 this.state，而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。
无法保证对 setState 的调用同步操作，并且可能会批量调用以提高性能。

如前所述，不能保证状态值会在您的下一行代码中更新。

如果您想检查状态以进行调试，请尝试将其记录在 render 方法中，因为此方法在状态更新后调用

【讨论】：

代码记录的是pageNum，而不是this.state.pageNum。
是的，我的错，我有“const {pageNum} = this.state;”在我的代码中更高：P 已修复！

【解决方案2】：

所以基本上你的问题是其他人从setState 引用的内容。但是你也可以轻松console.log 这样做：

this.setState({pageNum: this.state.pageNum+1}, () => {
  console.log(this.state.pageNum);
})

参见setState 定义：

void setState(
  function|object nextState,
  [function callback]
)

【讨论】：

【解决方案3】：

使用 setState 可以合并当前和以前的状态。因此价值。此外，它是同步的，因此可能会产生意想不到的结果。

【讨论】：

【解决方案4】：

注意事项：

setState() 不会立即改变this.state，而是创建一个挂起的状态转换。调用此方法后访问this.statecan potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

setState() 将始终触发重新渲染，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果正在使用可变对象，并且在 shouldComponentUpdate() 中无法实现逻辑，则仅在新状态与先前状态不同时调用 setState() 将避免不必要的重新渲染。

您可以从官方文档中获取更多信息 https://facebook.github.io/react/docs/component-api.html

【讨论】：