setState初始化后需访问state对象，componentDidMount获旧值应选用哪种状态系统？

你遇到的问题和状态系统无关，是典型的闭包捕获旧值问题：

1. componentDidMount 仅在组件首次挂载完成时执行一次，你在该方法内部将当时的 this.state.main_color 赋值给了局部变量 main_color，后续无论state如何更新，这个被事件回调闭包捕获的局部变量永远是初始空值，不会同步state的最新状态。
2. 手动查询DOM、绑定原生事件的写法不符合React的设计逻辑，也会放大闭包旧值的问题。

你完全可以继续使用React原生的state功能解决问题，修正要点如下：

• 放弃手动操作DOM绑定事件的写法，直接通过React内置的onClick属性给每个box元素绑定点击回调
• 点击事件触发时直接读取this.state.main_color获取最新值，不要提前将state值缓存到局部变量
• 如果你需要在调用setState之后立刻拿到更新后的状态，可以使用setState的第二个回调参数，示例：this.setState({ main_color: 新颜色值 }, () => { 这里的代码可以读取到更新后的state })

修正后的参考代码：

state = {
  color: '',
  main_color: '',
}

// 给每个box元素绑定属性 onClick={this.handleBoxClick}
handleBoxClick = (e) => {
  const clickColor = e.target.style.backgroundColor
  if (clickColor === this.state.main_color) {
    this.win()
  } else {
    this.loose()
    console.log(clickColor)
    console.log(this.state.main_color)
  }
}

win = () => {
  console.log("winner")
}

loose = () => {
  console.log("loose")
}

componentDidMount() {
  // 此处写初始化main_color的逻辑，例如随机生成目标颜色
  // 示例：this.setState({main_color: 'rgb(255, 0, 0)'})
}

内容的提问来源于stack exchange，提问作者Hayder Ali