Javascript 使用onClick从一个数组中删除项，并将其放入React中的另一个数组中

我希望能够单击某个元素，然后将其从player1阵列中移除，并将其放置到playCard阵列中。目前，这是附加到页面上的按钮

choseCard = () => {
    this.setState(({
        playCard,
        player1
    }) => {
        return {
            playCard: [...playCard, ...player1.slice(0, 1)],
            player1: [...player1.slice(1, player1.length)]

        };
    });

}

目前，这将从player1阵列中获取第一个项目，并将其放置在playCard阵列中。我希望能够从玩家阵列中选择某个元素（牌），而不是仅仅选择第一个元素。因为我还是一个初学者，所以我很难在react中思考如何做到这一点

---

是否有办法将所选卡移动到第一个元素，然后使用上述代码？

您可以在

return

语句上方插入所需的任何逻辑，然后返回结果：

choseCard=（）=>{
this.setState（（{playCard，player1}）=>{
//将'index'更改为要删除的索引
常数指数=1；
const toInsert=player1[index]；
const player1Copy=player1.slice（）；
播放器1复制拼接（索引1）；
const playCardCopy=playCard.slice（）；
playCardCopy.推送（插入）；
返回{
playCard:playCardCopy，
播放者1：播放者1副本，
};
});
}

尝试将您正在单击的元素的索引传递给函数，这可能会起作用

         choseCard = (index) => {
                this.setState(({playCard, player1}) => 
                  {
                    return 
                    {
                        playCard: [...playCard, ...player1.slice(index, 1)],
                        player1: [...player1.slice(0, index),...player1.slice(index,player1.length)]

                    };
                  });
                }

---

您可以在

choseCard

函数中传递卡片对象

choseCard(card) => {
  const {playCard, player1} = this.state;

  return this.setState({
    playCard: playCard.concat(card),
    player1: player1.filter(c => c.id !== card.id)
  });
}

---

这也是假设每张卡都有一个唯一的标识符。

你能分享你使用

choseCard

函数this.choseCard（）}>Player 1尝试输入你正在点击的player1元素的索引，并在playerCard的0部分替换该索引吗，在player1中进行必要的更改，就像您需要更新player1一样…您是否看到他告诉您他想要对数据进行变异，然后使用相同的代码将其删除。。。另外，set state始终需要一个新对象，但在代码中，您操作的是现有状态，这是不应该做的。。如果我的观察有误，请纠正我。你说得对，直接改变状态会导致不良副作用。我已经更新了我的答案，在变异数组之前复制它们。