React类组件点击按钮后state未更新，console.log输出undefined如何解决

问题原因 #

• 状态访问路径错误：React类组件中存储在state对象内的属性，必须通过this.state.属性名的方式访问，你代码中直接写this.showCartMessage，这个属性在组件实例上不存在，自然输出undefined。
• setState异步更新特性：setState是异步执行的API，调用后不会立刻修改当前的this.state值，即时打印即使路径正确，也只能拿到更新前的旧值。

修复代码 #

修改handleCartListener方法即可：

handleCartListener(){
  this.setState({ showCartMessage: true }, () => {
    // 回调函数会在状态更新完成后执行，此处可以拿到最新的state值
    console.log(this.state.showCartMessage)
  });
}

如果只是需要在视图层展示更新后的状态，直接在render方法内读取this.state.showCartMessage即可，状态更新后组件会自动触发重渲染，视图会同步最新值。

内容的提问来源于stack exchange，提问作者sheetal dadhich