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

Question

I want to assign this.state.currentPlayer to this.state.whosPlaying . It throws the error 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,
    };
  }

Has someone a pattern for this?

Answer 1

You cannot reference an object during initialization if you are using the object literal syntax.

If you want to set a property on state based on an existing property in the object, you can do so in the componentWillMount() lifecycle method.

The code would look as follows:

Inside constructor()

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

Inside componentWillMount()

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

Note: If you are using React 16.3+, you could consider using getDerivedStateFromProps().

Answer 2

Just use an intermediate variable:

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

Or just set it after the object literals end:

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

Answer 3

I don't really think react's state is supposed to be used like this. If you would like to do this I would just declare the currentPlayer before you set the state. See below for an example:

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