2016-09-16 275 views
0

的setState的setState()():问题在if语句中if语句

// morePage = true 
// pageNum = 1 

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

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

的setState()出来if语句:

// morePage = true 
// pageNum = 1 

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

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

我面临着现在,我想知道为什么......

谢谢:)

编辑时,正确答案:

所以,是的,我应该花更多的时间阅读阵营的文件:P 如果有人想知道如何我终于做到了,这里就是答案:

在文档,他们都说没有保证您的状态将在重新呈现之前具有新的价值。所以你必须使用“componentDidUpdate()”。

所以我所做的是,我把:

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

我已经创建了一个随机函数里面,之后,在“componentDidUpdate(prevProps,prevState)”功能,我可以访问新和旧道具价值观,我可以使用以前的和“页次” :)

+0

你应该结帐我的回答如果你不想使用额外的生命周期方法只适用于本。 –

+0

是的,你的答案也应该工作,但我的代码更大,我有其他的东西需要在componentDidUpdate(),所以这是一个更干净的解决方案:) – Leon

回答

2
的setState的电流值()不会立即发生变异this.state而造成挂起状态转变。调用此方法后访问this.state可能会返回现有值。
没有调用SETSTATE,呼叫可能会分批进行性能提升的同步运行的保证。

如前所述它不能保证状态值将在代码的下一行进行更新。

如果您要检查的状态进行调试尝试render方式登录的话,作为状态更新

+1

代码记录'pageNum',而不是'this。但是,state.pageNum'。 – robertklep

+0

是啊我的坏,我有“const {pageNum} = this.state;”我的代码更高:P 已修复! – Leon

0

后的setState当前和以前的状态合并调用此方法。因此,价值。此外,它的同步,可能会出现意想不到的结果。

0

注:

setState()不会立即发生变异this.state但创建待状态转变。调用此方法can 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()将总是触发后访问this.state重新渲染除非条件呈现逻辑在shouldComponentUpdate()实现。如果正在使用可变对象,并且该逻辑不能在shouldComponentUpdate()中实现,则仅当新状态与先前状态不同时调用setState()才能避免不必要的重新呈现。

你可以从官方文档 https://facebook.github.io/react/docs/component-api.html

0

所以基本上你的问题是从setState引述别人获得更多的信息。但是你可以很容易地console.log也做:

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

setState定义:

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