时间戳

首页 > 解决方案 > 在 this.state 构造函数中访问状态对象

javascript - 在 this.state 构造函数中访问状态对象

问题描述

我有一个有 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'.
    }
  }
}

我尝试了以下三件事：

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例如，通过为每个玩家添加一个布尔值？

欢迎任何意见/建议。

标签： javascriptreactjs

解决方案

您的第三个选项是正确的，如果您希望它看起来不像您以不同的方式声明它们，您可以这样做，

    const playerOne = {
      name: "foo"
    }

    const playerTwo = {
      name: "bar"
    }

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

推荐阅读