Question

我知道如何做到这一点，但尝试这种方式，不知道为什么它不会工作？

  drawCard = () => {
    const deck = this.state.cards;
    deck.shift();
    console.log(deck, 'deck'); //this is correctly logging one less everytime
    this.setState({cards: deck})
  }

卡只是一个对象

所以即使正在调用该函数并且控制台日志正在运行，为什么它不会更新状态？

（console.log（state.cards.length）总是返回3）

Answer 1

不要使用改变状态的方法（例如，Array#shift）。您可以使用Array#slice返回数组部分的浅表副本：

drawCard = () => {
  this.setState({ cards: this.state.cards.slice(1) })
}

Answer 2

在做出反应时，你不能只改变状态，您需要在更新前创建州的副本，

最简单的方法就是替换它：

 const deck = this.state.cards;

进入这个：

const deck = [...this.state.cards];

Answer 3

问题出现是因为您正在直接修改状态。虽然您要将州分配给“甲板”。记住，在Javascript数组中，对象是引用。因此，当您修改套牌时，您实际上是在尝试修改状态本身。您可以使用其他方法创建状态值的副本并对其进行修改。

您可能会发现这有用： React - Changing the state without using setState: Must avoid it?

删除处于反应状态的第一个数组项

3 个答案: