Question

我想将this.state.currentPlayer分配给this.state.whosPlaying。它会抛出错误TypeError: Cannot read property 'currentPlayer' of undefined at new Board。

constructor(props) {
    super(props);
    this.state = {
      symbols: [X, O],
      currentPlayer: Math.floor(Math.random() * 2),
      fields: Array(9).fill(null),
      whosPlaying: this.state.currentPlayer,
    };
  }

有人有这种模式吗？

Answer 1

如果使用对象文字语法，则无法在初始化期间引用对象。

如果要根据对象中的现有属性设置状态属性，可以在constructor(props) { super(props); this.state = { symbols: [X, O], currentPlayer: Math.floor(Math.random() * 2), fields: Array(9).fill(null) }; }生命周期方法中执行此操作。

代码如下：

内部构造函数（）

this.setState((prevState) => { whosPlaying: prevState.currentPlayer });

在componentWillMount（）

中

{{1}}

注意：如果您使用的是React 16.3+，则可以考虑使用getDerivedStateFromProps（）。

Answer 2

只需使用中间变量：

constructor(props) {
 super(props);
 const currentPlayer = Math.floor(Math.random() * 2);
 this.state = {
    symbols: [X, O],
    currentPlayer,
    fields: Array(9).fill(null),
    whosPlaying: currentPlayer,
 };
}

或者只是在对象文字结束后设置它：

this.state = { currentPlayer: Math.floor(Math.random() * 2) };
this.state.whosPlaying = this.state.currentPlayer;

Answer 3

我真的不认为反应的状态应该像这样使用。如果你想这样做，我会在设置状态之前声明currentPlayer。请参阅下面的示例：

constructor(props) {
    super(props);
    const currentPlayer = Math.floor(Math.random() * 2)
    this.state = {
      symbols: [X, O],
      currentPlayer,
      fields: Array(9).fill(null),
      whosPlaying: currentPlayer,
    };
  }

我如何在this.state中使用this.state

3 个答案: