在立即 setState 后反应无法获得新值

Question

我正在使用 Reactjs。如果输入不正确，我将在其中设置错误。
示例代码为：

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

此处error_state 的值不会反映下一个 if 中的更改值

Answer 1

是的，这是期望的行为。

值没有更新的原因是你的组件还没有重新渲染。

如果你需要这样的功能，你应该使用componentDidUpdate回调。

查看生命周期方法here。

解释：

这是 React 的工作原理：

1. 每个组件都是external props + internal state的函数

2. 如果两者中的任何一个被触发，组件就会排队等待重新渲染（它是异步的，因此客户端应用程序不会被阻塞）。

3. 有关操作的确切顺序，请参见上面的链接，但这里有一些概念证明。

   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 本质上是异步的。

第二个（可选）参数是一个回调函数，它将被 在 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 3

是的，确实。

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。

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

Answer 4

没有。在 setState 之后，您无法在控制台中获取更新值。这是因为一旦调用 setState，视图就会重新渲染。因此，要获取更新的值，您可以在 render() . 中检查它

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