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'.
    }
  }
}

我尝试了以下三件事：

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
      }
    }
  }
}

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

3 个答案: