React中如何在state初始化时引用this.state？赋值报错求解决方案

嘿，这个问题我之前踩过坑！你之所以会遇到TypeError: Cannot read property 'currentPlayer' of undefined，是因为在初始化this.state的对象字面量内部，this.state还没有被赋值——也就是说，当你写whosPlaying: this.state.currentPlayer的时候，this.state还不存在呢，自然就没法读取它的currentPlayer属性。

可行的实现方案 #

最直接的解决办法是先把随机生成的玩家值存在一个临时变量里，再用这个变量给两个状态字段赋值：

constructor(props) {
  super(props);
  // 先把随机生成的玩家值存到变量里
  const initialPlayer = Math.floor(Math.random() * 2);
  this.state = {
    symbols: [X, O],
    currentPlayer: initialPlayer,
    fields: Array(9).fill(null),
    whosPlaying: initialPlayer,
  };
}

这样做的好处是：

• 不用依赖还未创建的this.state，彻底避免了undefined的问题
• 代码更清晰，后续如果需要修改初始玩家逻辑，只需要调整一处变量即可

如果之后你需要在组件运行过程中同步currentPlayer和whosPlaying的值，可以在更新状态时同时修改两个字段，比如：

this.setState({
  currentPlayer: newPlayerValue,
  whosPlaying: newPlayerValue
});

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