当我使用 react 钩子更改状态时如何导致重新渲染?

Question

我正在创建一个组件，它涉及两个用于创建游戏会话的按钮。当用户创建游戏时，它会自动将他重定向到游戏会话。我还想允许重定向到会话，如果游戏不是由用户创建的，而是用户"加入"由其他用户创建的所谓游戏会话。我的功能组件如下所示：

const GameCreate = ({session}) => {
/************** HOOKS *******************************/
const [sessionLocal, setSessionLocal] = useState(null);
useEffect(() => {
setSessionLocal(session);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [session]);

/************** EVENT HANDLERS *******************************/
const createGameSession = (gamesettings) => {
const { playerLimit, deckId } = gamesettings;
createSession(.....);//call to back end that populates 'session' props which inturn triggers the 
//useEffect hook above
};
const joinSetSession = (sessionToJoinIndex) => {
setSessionLocal(foundgames[sessionToJoinIndex]);
};
if (sessionLocal) {
return <Redirect to="/gamesession" />;
}
return profile === null ? (
<Spinner />
) : ( <Fragment>
<div><p>{profile.name}</p></div>
<CreateGame // a modal component that calls the createGameSession() as a callback
// .... some other data is passed to this component
setGame={(gamesettings) => createGameSession(gamesettings)}
/>
<JoinGame // a modal component that calls the joinSetSession() as a callback
// .... some other data is passed to this component
setSessionToJoin={(sessionToJoinIndex) =>
joinSetSession(sessionToJoinIndex)
}
/>
</Fragment>
);
};

我的问题是，目前createGameSession已成功触发我的useEffect(因为"session"作为API的有效负载返回(。结果，我的会话本地也被填充，这成功地导致了重定向。joinSetSession 不会发生同样的情况，因为当 setSessionLocal 设置 sessionLocal 状态时，useEffect 钩子似乎不会触发。有人可以向我解释为什么会发生这种情况以及如何解决它吗？非常感谢您的帮助。谢谢！

Answer 1

useEffect 钩子不会触发，直到数组中传递的值(即 useEffect 钩子的第二个参数(没有改变。在本例会话中。

查看代码，我没有看到joinSetSession更改或更新会话值。您需要找到一种方法来使joinSetSession更改会话值，或者使逻辑与 sessionLocal 变量不那么紧密耦合。

我可能会建议使用另一个 useState 钩子，它将跟踪加入现有会话并基于可以完成其值操作。