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

【问题标题】：setState is not updating state instantly [duplicate]setState 不会立即更新状态[重复]
【发布时间】：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 期间都没有设置状态，但是当您打开对象时，它已经设置了
问题不是两个不同的值，问题是当你输出整个对象时，设置了键，然后在你输出这个键之后，从这个对象中，键是空的。

标签： javascript reactjs

【解决方案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。看起来前两个控制台日志没有显示任何状态，因为初始状态为空，并且在异步调用完成后超时后，它使用香蕉设置状态。

【讨论】：