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（因为“会话”作为API的有效载荷返回）。结果，我的sessionLocal也被填充，这成功导致了重定向。对于joinSetSession不会发生相同的情况，因为当setSessionLocal设置sessionLocal状态时，useEffect挂钩似乎不会触发。有人可以向我解释为什么会发生这种情况以及如何解决吗？非常感谢您的帮助。谢谢！

Answer 1

useEffect挂钩不会触发，直到在useEffect挂钩的第二个参数数组中传递的值不变为止。在这种情况下，会话。

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

我可能建议使用另一个useState挂钩，该挂钩将跟踪加入现有会话并以此为基础进行值操作。

使用React钩子更改状态时如何导致重新渲染？

1 个答案: