Javascript 如何通过状态传递数组项

我正在制作一个纸牌游戏，希望游戏卡在阵列中包含先前的和附加的纸牌。目前，当我尝试使用玩家手上的pop或splice时，它会从玩家手阵列中取出这些卡并将它们放入playCard阵列中，但当player2尝试添加到playCard阵列时，它会覆盖它，并且里面只有player2卡。这就是我如何创建卡片和处理它们：

  this.state = {
            deck: [],
            player1: [],
            player2: [],
            player3: [],
            player4: [],
            playCard: [],

        }

        this.makeCards(); 
        this.shuffle();

    }

    makeCards = () => {
        const suits = ['Hearts', 'Spades', 'Clubs', 'Diamonds']
        const values = ['Ace', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'Jack', 'Queen', 'King']


        for (let suit in suits){
            for (let value in values) {
                this.state.deck.push(<span className='cards' key={value+suit}>{values[value]}</span>);
            }
        }

        return this.deck
    }

    deal = () => {
            this.setState({ player1: this.state.deck.filter((cards, index) => {
                    return index < 13 ? cards : null
                }) 
            }) 
            this.setState({ player2: this.state.deck.filter((cards, index) => {
                    return index >= 13 && index < 26 ? cards : null
                }) 
            }) 
            this.setState({ player3: this.state.deck.filter((cards, index) => {
                    return index >= 26 && index < 39 ? cards : null
                }) 
            }) 
            this.setState({ player4: this.state.deck.filter((cards, index) => {
                    return index >= 39 && index <= 52 ? cards : null
                }) 
            }) 
    }

---

我知道现在没有进行过滤，我只希望player2添加到playCard阵列中。如何在仍然从玩家阵列中取出卡牌的情况下执行此操作？

您应该使用状态值的副本进行操作。否则，您将直接制作阵列。试试这样的。它将创建一个副本。操纵阵列，然后将其重新置于状态

choseCard(){
  let player1 = [ ...this.state.player1 ]
  let playCard = player1.splice[0,2]
  this.setState(() => ({player1, playCard}))
}
player2turn() {
  let player1 = [ ...this.state.player1 ]
  let playCard = [ player1.pop() ]
  this.setState(() => ({player1, playCard}))
  //I need to filter player2 array to find card value in playCard
  //if it has that then push to this.state.playCard
  //Player 3 sorts through array to find card etc....
}

---

将以前的状态与新状态结合起来，不要对其进行变异。如果您还需要更改player2，只需基于上一个状态创建一个新阵列，而不使用第一张卡。

当我使用slice时，它不会从播放器阵列中取出卡，但当我使用

this.state.player1.splice（0，1）

时，它会取出卡，但当player2拼接（0，1）时游戏卡阵列仍然只有一张卡，即使已经从玩家那里拿走了两张卡。我更新了我的答案。只需使用状态的副本，然后在完成操作后重新设置玩家的手。最基本的问题是你在操作数组的状态，这会导致非常糟糕和奇怪的事情发生。这只是解决这个问题的一种方法。当我使用“拼接”而不是“切片”时，这是正确的，因为我将牌从玩家手中拿走，并将其放入扑克牌阵列中。谢谢大家!@3.剪接突变参考阵列。您最好创建一个新的并更新状态。

choseCard(){
  let player1 = [ ...this.state.player1 ]
  let playCard = player1.splice[0,2]
  this.setState(() => ({player1, playCard}))
}
player2turn() {
  let player1 = [ ...this.state.player1 ]
  let playCard = [ player1.pop() ]
  this.setState(() => ({player1, playCard}))
  //I need to filter player2 array to find card value in playCard
  //if it has that then push to this.state.playCard
  //Player 3 sorts through array to find card etc....
}

this.setState(({ playCard, player2 }) => {
  return {
   playCard: [...playCard, ...player2.slice(0, 1)],
   player2: [...player2.slice(1, player2.length - 1)],
  };
});