React状态中删除数组的第一个项目

Question

我知道如何做，但尝试了这种方式，不确定为什么它不起作用？

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

cards只是一组对象。

所以尽管函数被调用并且控制台日志也在工作，为什么状态没有更新呢？

(console.log(state.cards.length)始终返回3)

- The Walrus

---

你正在改变state。尝试使用const deck = [...this.state.cards];。 （说明：建议在代码中使用这一行，以避免意外修改状态。此行将创建一个“ deck ”数组，该数组包含与原始“ cards ”数组相同的所有元素，并且可以安全地进行更改而不会影响原始状态。） - Prakash Sharma

Answer 1

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

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

- djfdev

---

好的，当我在函数中记录它时没问题，但在渲染时记录状态就不行了？ - The Walrus

也许你应该分享你组件的完整代码。 - djfdev

抱歉，我遇到了一些问题。不过现在已经解决了 :D - The Walrus

Answer 2

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

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

- Chris Aby Antony

Answer 3

在React中，你不能直接改变状态，需要在更新之前创建状态的副本。

最简单的方法就是将这个替换掉：

 const deck = this.state.cards;

转换成：

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

- Tom Mendelson

---

我猜你在ReactJS方面还是新手，最好看看React状态的处理方式（https://medium.freecodecamp.org/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5）（这是一篇很好的文章）。无论如何，如果你不改变状态的值，你应该获取数据的副本，然后更改副本，最后使用setState函数，这将更新你的状态。 - Tom Mendelson