尝试在 React 状态下将项目从一个数组移动到另一个数组

Question

我想在暑假里学习反应。我正在重新创建一个名为“星期五”的纸牌游戏，基本上我需要移动存储在数组中的“纸牌”。例如，一副牌的数组和一手牌的数组，但由于设置状态的异步性质，我运行在抽牌太快时陷入竞争条件。我终于有了一些我觉得应该有用的东西，但它每次都添加了两个副本。我当前的方法是采用两个数组的 useSet 设置器的函数，如下所示：

function drawCard(fromSet, toSet) {
  fromSet( previous => {
    const[card, ...remainder] = previous;
    sendToTo(card);
    return [...remainder];
    });
  function sendToTo(card) {
    toSet(prev => [...prev, card]);
  }
}

但是，如果我快速连续调用两次并随后检查状态，我会看到两张卡片已从 from 数组中删除，但 to 数组现在有 [card1, card2, card1, card2]

我现在已经添加了一个可怕的修复程序，但如果可能的话我宁愿把它做对。我的解决方法是将 toSet 调用更改为：

toSet(prev => {
  if(prev.some(e => e === card))
    return [...prev];
  return [...prev, card];
};

Answer 1

这就是您要找的东西吗？尝试单击此代码框上的按钮 (https://codesandbox.io/s/muddy-glade-s7eut?file=/src/App.js)

import "./styles.css";
import { useState, useEffect } from "react";
export default function App() {
  const [deck, setDeck] = useState([]);
  const [hand, setHand] = useState([]);
  const [drawing, setDrawing] = useState(false);

  useEffect(() => {
    const exampleDeck = [
      { cardNumber: 1, cardName: "Card1" },
      { cardNumber: 2, cardName: "Card2" },
      { cardNumber: 3, cardName: "Card3" },
      { cardNumber: 4, cardName: "Card4" },
      { cardNumber: 5, cardName: "Card5" }
    ];
    setDeck(exampleDeck);
  }, []);

  const drawCard = () => {
    if (deck.length > 0) {
      setDrawing(true);
      const topCard = deck[0];
      setHand((existingHand) => [...existingHand, topCard]);
      setDeck(
        deck.filter((deckCard) => deckCard.cardNumber !== topCard.cardNumber)
      );
      setDrawing(false);
    }
  };

  return (
    <div className="App">
      <h4>Deck: </h4>
      {deck.length > 0 && deck.map((card) => <p>{card.cardName}</p>)}
      <h4>Hand: </h4>
      {hand.length > 0 && hand.map((card) => <p>{card.cardName}</p>)}
      <button onClick={drawCard} disabled={drawing}>
        Draw Card
      </button>
    </div>
  );
}

尝试在 React 状态下将项目从一个数组移动到另一个数组

Trying to move an item from one array to another in React state

arrays

race-condition

reactjs