Question

我正在与Reactjs合作。如果输入不正确，我会设置错误。
示例代码为：

handleChange: function() {
 if(shares) {
   this.setState({
     error_shares:''
   })
 } 
 if(this.state.error_shares === ''){
  console.log('entered!!')
 }
}

此处error_state的值不会反映下一个

中的更改值

Answer 1

是的，这是理想的行为。

尚未更新该值的原因是因为您的组件尚未重新渲染。

如果您需要此功能，则应使用componentDidUpdate回调。

请参阅生命周期方法here。

<强>说明：

以下是React的工作原理：

每个组件都是external props + internal state
如果触发了两者中的任何一个的更改，则组件将排队等待重新呈现（它是异步的，因此不会阻止客户端应用程序）。

请参阅上面的链接以了解确切的操作顺序，但这里有一点概念证明。

import React from 'react';

class Example extends React.Component {

    constructor(props, context) {
        super(props, context);
        // initial state
        this.state = {
            clicked: false
        };
    }

    componentDidUpdate(prevProps, prevState) {
        console.log(this.state.clicked);   // this will show "true"
    }

    render() {
        return (
            <button 
                onClick={() => {
                    this.setState({clicked: true}); 
                }}
            >
            </button>
        );
    }
 }

Answer 2

是的，确实。

setState（）不会立即改变this.state，但会创建挂起状态转换。在调用此方法后访问this.state可能会返回现有值。

http://facebook.github.io/react/docs/component-api.html

Answer 3

setState本质上是异步的。

第二个（可选）参数是一个回调函数完成setState后执行并重新呈现组件。

所以你可以这样做。

handleChange: function () {
    if ( shares ) {
        this.setState( {
            error_shares: ''
        }, function () {
            if ( this.state.error_shares === '' ) {
                console.log( 'entered!!' )
            }
        } )
    }
}

来源：https://facebook.github.io/react/docs/component-api.html#setstate

Answer 4

没有。您无法在setState之后的控制台中获取更新值。这是因为只要调用setState，就会重新呈现视图。因此，要获得更新的值，您可以在render() .

中查看

render(){
 if(this.state.error_shares === ''){
    //your code.
 }
}

在反应中，在立即设置状态后不能获得新值

4 个答案: