React 的問題不更新 state（掛鈎）

Question

我有一個 memory 小游戲，我正在構建它來學習 React。 這個想法是，您單擊一個圖塊，它會被打亂，然后您嘗試選擇一個您尚未選擇的圖塊。 問題是我似乎無法獲取我的內部 state，之前已經看到它更新了磁貼。

這是我的組件：

const Gameboard = (props) => {
  const [tiles, setTiles] = useState([]);
  const [currentScore, setCurrentScore] = useState(0);
  const [highScore, setHighScore] = useState(0);
  const [previouslySeen, setPreviouslySeen] = useState([]);

  const handleClick = (evt) => {
    const tile = evt.target;
    if (!previouslySeen.includes(tile)) {
      setCurrentScore(current => current + 1);
      props.setCurrentScore(current => current + 1);
      setPreviouslySeen([...previouslySeen, tile]);
    } else {
      alert("Game over, thanks for playing!");
      if (currentScore > highScore) {
        setHighScore(currentScore);
        props.setHighScore(currentScore);
      }
      setCurrentScore(0);
      props.setCurrentScore(0);
      setPreviouslySeen([]);
    }
  };

  const generateTiles = (tileCount) => {
    return [...Array(tileCount).keys()].map((n) => {
      return <Tile key={n} number={n} handleClick={handleClick} />;
    });
  };

  const shuffleTiles = (tiles) => {
    let tilesCopy = [...tiles];

    for (let i = tilesCopy.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * i);
      const temp = tilesCopy[i];
      tilesCopy[i] = tilesCopy[j];
      tilesCopy[j] = temp;
    }

    return tilesCopy;
  };

  useEffect(() => {
    const initialTiles = generateTiles(props.tileCount);
    setTiles(shuffleTiles(initialTiles));
  }, []);

  useEffect(() => {
    setTiles((oldTiles) => {
      const newTiles = shuffleTiles(oldTiles);
      return newTiles;
    });
  }, [currentScore, highScore]);

  return <div className="Gameboard">{tiles}</div>;
};

handleClick方法被傳遞到各個Tile組件中，並且僅使用onClick進行調用。 handleClick method is what is giving me trouble, it seems as if it doesn't ever update過 previouslySeen`，我在父組件中設置高分以使其反映在 UI 中時遇到類似的問題。 你應該如何在 React 中處理這樣的更新？

Answer 1

試試這個：

const handleClick = (evt) => {
const tile = evt.target;
if (!previouslySeen.includes(tile)) {
  setCurrentScore(current => current + 1);
  props.setCurrentScore(current => current + 1);
  // Change the following line:
  setPreviouslySeen(previousState => [...previousState, tile]);
} else {

此外，您將從父屬性和聲明狀態中獲取setCurrentScore, setHighScore ：

  const [currentScore, setCurrentScore] = useState(0);
  const [highScore, setHighScore] = useState(0);

所以基本上你保持兩個獨立的currentScore和highScore狀態 - 一個在Gameboard組件中，一個在它的父組件中。 最好從Gameboard中刪除這state個變量和setter，直接從parent props中獲取。

Answer 2

事實證明，這是因為我將 JSX 元素直接存儲在 state 中。刪除它並僅存儲平鋪值（純 JS 字符串）解決了 state 未正確更新的問題。 真是陷阱！