在this.state構造函數中訪問狀態對象

Question

我有一個包含2個對象（玩家）的狀態，其中只有1個對象可以依次進入。

如何將播放器保存到轉入狀態，以便可以使用其數據？

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      playerOne: {
        name: "foo"
      },
      playerTwo: {
        name: "bar"
      }
      playerOnTurn: {} // This has to become the same Object as 'playerOne'.
    }
  }
}

---

我已經嘗試了以下3件事：

---

1）直接訪問狀態（在狀態內）：

 playerOnTurn: this.state.playerOne 

不幸的是， 它不起作用 ，因為由於仍在構造狀態，因此尚未定義狀態。

---

2）兩次寫入同一對象：

 playerOnTurn: { name: "foo" } 

它可以工作 ，但是我不想寫兩次，因為一個播放器可以包含許多屬性。 就可維護性而言，這似乎是一個糟糕的解決方案。 因為可以稍后添加/刪除屬性，這可能導致它們變得不相同。

---

3）在將對象設置為狀態之前對其進行聲明：

 class App extends React.Component { constructor(props) { super(props); const playerOne = { name: "foo" } this.state = { playerOne: playerOne, playerTwo: { name: "bar" } playerOnTurn: playerOne } } } 

它可以工作 ，但是就可讀性而言，似乎不是一個很好的解決方案。 因為我以不同的方式宣布兩個球員。

---

也許需要不同的方法？ 例如，通過向每個玩家添加布爾值onTurn ？

歡迎任何意見/建議。

Answer 1

您的第三個選項是正確的，如果您不希望它看起來像您以不同的方式聲明它們，則可以這樣做，

    const playerOne = {
      name: "foo"
    }

    const playerTwo = {
      name: "bar"
    }

    this.state = {
      playerOne,
      playerTwo,
      playerOnTurn: playerOne
    }

Answer 2

在這種情況下，您應該使用componentDidMount生命周期方法來更新狀態。

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      playerOne: {
        name: "foo"
      },,
      playerTwo: {
        name: "bar"
      }
      playerOnTurn: {}
    }
  }

  setPlayerOnTurn(player){
      this.setState({ playerOnTurn : player });
  }

  componentDidMount(){
      // other initialization
      this.setPlayerOnTurn(this.state.playerOne);
  }
}

Answer 3

您可以使用getter函數，該函數允許您在函數內部訪問this函數（在對象的上下文中）：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      playerOne: {
        name: "foo"
      },,
      playerTwo: {
        name: "bar"
      }
      get playerOnTurn() {
        return this.playerOne
      }
    }
  }
}