Good evening everyone,
I've encountered an error with one of my components. The error message reads:
Cannot update a component (GameBase) while rendering a different component (ExistingGame). To locate the bad setState() call inside...
I'm not exactly sure how to troubleshoot and fix this issue.
In my code, I am conditionally rendering the ExistingGame component based on Redux properties within the GameBase component, like this:-
if (gameReducer.registered){
return(
<>
<ExistingGame />
{ goBackIcon }
</>
)
}
The gameReducer.registered is set through a dispatch function triggered by an onClick event in a list rendered within the GameBase component:-
const ActiveGameList = () => (
<table><tbody>
{activeGamesArray.map(activeGame => (
...
<td key={`join${activeGame.gameId}`} className="joinGame"> <IconContext.Provider value={{ size:20 }}><div className='joinGameIcon' onClick={()=>{ joinTheGame(activeGame) }}><ImUserPlus /></div></IconContext.Provider></td>
</tr>
))}
</tbody></table>
);
return(
<>
<h1>Existing games</h1>
<h3>Select game to join:</h3>
<ActiveGameList />
<br/>
{ goBackIcon }
</>
)
The function causing the issue is joinTheGame, defined as follows:-
const joinTheGame = async (activeGame) => {
let gameInfo = {gameId:activeGame.gameId, gameName: activeGame.gameName, bankerPlayerNumber: activeGame.bankerPlayerNumber, forename: activeGame.firstName, surname: activeGame.lastName, gameLive: activeGame.gameLive };
// Fetch details for selected game before proceeding
await client.query({
query: GAME_PLAYER_DETAILS,
fetchPolicy: "network-only",
variables: {gameId:gameInfo.gameId}
})
.then(result => {
let players = result.data.allGameMoneyPlayers.nodes;
gameInfo.players = players;
if (joinLiveGame){
dispatch(reJoinGame(gameInfo));
} else if (joinPendingGame){
dispatch(joinGame(gameInfo));
}
});
}
From my research, it seems that placing the state-changing call within a useEffect hook might solve the problem. However, attempting to wrap the reJoinGame dispatch in a useEffect results in a "React Hook 'useEffect' cannot be called inside a callback" error.
If anyone could offer guidance on how to address this issue, I would greatly appreciate it. Thank you.