React useContext 无法使用 setTimeout function 更新 state

Question

I am new to React, so maybe excuse my dumb question. I want to refresh the score of my card game in a for Each loop with a setTimeout function in each run. The state seems to be updated, but the DOM (Component overarching) is not.

export function RefillStack() {
  const { gameStore, setGameStore } = useContext(GameContext);
  const finishMove = () => {
    let game: Game = { ...gameStore };
      // some code
    game.players.forEach((player, playerIndex) => {
      game.players[playerIndex] = player.cards.filter(card => card > 6);
      // some code
      setTimeout(()=> {setGameStore(game)}, 1000);
    });

If I use the useState function then everything works, but I have to use the useContext function. I think I need a workaround for this, but what is the smartest way to do it? Thank you very much for any help!

Answer 1

I have come closer to my solution myself.

I had to assign a clone of the gameStore to the variable "Game" again after the setGameState function.

It's certainly not elegant, but it works for me. The forEach looks now like this.

 game.players.forEach((player, playerIndex) => {
  game.players[playerIndex] = player.cards.filter(card => card > 6);
  // some code
  setTimeout(()=> {setGameStore(game)}, 1000 * (playerIndex + 1));
  game = {...gameStore};
});

Answer 2

You might try using the useEffect hook to schedule the context state change. After a component has been rendered, you may use this hook to conduct side effects (such as altering the context state).

Here's an example of how you could use useEffect to schedule context state updates in your code:

import { useEffect } from 'react';

export function RefillStack() {
  const { gameStore, setGameStore } = useContext(GameContext);
  const finishMove = () => {
    let game: Game = { ...gameStore };
    // some code
    game.players.forEach((player, playerIndex) => {
      game.players[playerIndex] = player.cards.filter(card => card > 6);
      // some code
    });
    // Schedule the update to the context state using useEffect
    useEffect(() => {
      setTimeout(() => {
        setGameStore(game);
      }, 1000);
    }, []); // The empty array ensures that the effect only runs once
  }
}

This should allow you to asynchronously update the context state and trigger a re-render of the component that utilizes the context state.

I hope this was helpful!