javascript - 在反应状态下删除数组的第一项

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

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

您可能会发现这很有帮助： React - 更改状态而不使用 setState：必须避免吗？

Answer 3

在反应中，您不能只更改状态，您需要在更新之前创建状态的副本，

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

 const deck = this.state.cards;

进入这个：

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