setState未立即更新状态[重复]

Question

我有一个简单的组件

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);

问题是我需要添加什么this.state

下图：

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




Answer 1

根据响应文档，setState（）是异步的，同一周期中的多个调用可能会被批处理在一起。如果检查更新的状态值，可以添加回调方法

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

在您的情况下，第一个console.log（this）不会设置香蕉。在沙盒中查看您的代码。看起来前两个控制台日志没有显示任何状态，因为初始状态为null，在异步调用完成超时后，它将使用香蕉设置状态。

Answer 2

react的文档提到状态更新是异步的。为了根据状态的变化采取行动，reactsetState函数提供了一个回调，您可以按如下方式使用该回调：

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

关于你的评论，国家的价值在印刷时并不存在。该值仅在您单击控制台中的展开箭头后计算。有关更多细节，请参见此