setState 不会立即更新状态[重复]

Posted 2023-02-21

【中文标题】setState 不会立即更新状态[重复]

【英文标题】：setState is not updating state instantly [duplicate]

【发布时间】：2018-08-12 20:17:24

【问题描述】：

我有简单的组件

class App extends Component 
    handleClick() 
        let banana = message: 'banana triggered';
        this.setState(banana);

        console.log(this); // banana is set in state!!!!
        console.log(this.state); // state is null :O
        setTimeout(() => 
            console.log(this.state); // banana is set!
        , 5)
    

    render() 
        const state, actions = this.props;

        return (
                <div>
                    this.state && this.state.banana.message <br />
                    <button onClick=() => this.handleClick()>Test</button>


                    state.alert.message && <p>state.alert.message</p>
                    <p onClick=() => actions.alert.success("This is not")>
                        This is magic
                    </p>
                </div>
        )
    ;


export default connect(
    state => (
        
            state: ...state
        
    ),
    dispatch => (
        
            actions: 
                dispatch: dispatch,
                alert: 
                    success: text => dispatch(alert.success(text))
                
            
        
    )
)(App);

问题是我需要在我的 JSX 渲染中添加 this.state && 以检查 this.state 是否存在，我知道在 javascript 中这是正常的，但在 React.js 中不正常？他应该立即对状态变化做出反应吗？同样让我感到困惑的是，来自两个 console.logs 的内容，第一个（这个）设置了香蕉状态，第二个是空的。如何？

下图：

附言。 Redux 没有这个问题，只有本地组件状态

【问题讨论】：

setState 是异步的。我们不能在同一生命周期钩子中的状态中存在值

您在控制台上获得 2 个不同值的原因是，当您打开 this 对象时，它会显示当前值。您在行尾看到一个小图标吗？将鼠标悬停在其上即可查看。原因可能是在您的 console.logs 期间都没有设置状态，但是当您打开对象时，它已经设置了

问题不是两个不同的值，问题是当你输出整个对象时，设置了键，然后在你输出这个键之后，从这个对象中，键是空的。

【参考方案1】：

react's docs mention 状态更新是异步的。 为了根据状态的变化采取行动，reactsetState 函数提供了一个回调，您可以使用如下：

this.setState(banana, () => 
    console.log(this.state);
);

关于您的评论，该状态的值在打印时实际上并不存在。该值仅在您单击控制台中的展开箭头 see this for more deatils 后计算得出

【讨论】：

罗杰，这回答了为什么渲染中的状态为空，但是为什么尽管香蕉键已经在状态对象中，但它在 handleClick 的第二个 console.log 中输出空？ p.s.我稍后会接受你的回答，因为如果我现在就做，每个人都会跳过这个问题:)

【参考方案2】：

根据react docs，setState() 是异步的，同一周期内的多个调用可能会被批处理在一起。 如果检查更新的状态值，可以添加回调方法

this.setState( banana , ()=> 
 // console.log(this.state);
 // Here's the updated state
);

在您的情况下，第一个 console.log(this) 没有设置香蕉。 See your code in Sandbox。看起来前两个控制台日志没有显示任何状态，因为初始状态为空，并且在异步调用完成后超时后，它使用香蕉设置状态。