通过更改子模式组件（反应钩）的状态来重新渲染反应组件

由 发布于 reactjsreact-hooks
 收藏

I have a 'Game' functional component that has 2 child modal components - <JoinGame> and <CreateGame>. I am trying to re-render the component such that if the 'localSession' state is populated, the re-render triggers a re-direct to the /gamesession link.

可以通过CreateGame或当用户使用JoinGame选择许多可用游戏会话之一时填充localSession。出于某种原因，仅当我创建游戏时才重定向到/ gamesession链接，而在加入游戏时不发生。有人可以解释一下吗？

我已经简化/删除了功能的某些方面，以提高可读性，尤其是某些事件处理程序和对这两个模式组件的“引用”。现在，需要知道的是CreateGame填充了“会话”状态，而JoinGame填充了“ joinIndex”状态-两者都被useEffect挂钩监视：

import { createSession } from elsewhere: uses redux to make an api request, populating 'session' when done.

//note: foundgames is automatically populated through the parent of this component.

const Game = ({session, foundgames}) => {
  const [localSession, setLocalSession] = useState(null);
  const [joinIndex, setJoinIndex] = useState(-1);

  useEffect(() => {
    setLocalSession(foundgames[joinIndex]);                        /* THIS DOES NOT TRIGGER RE-DIRECT*/
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [joinIndex]);

  useEffect(() => {           
    setLocalSession(session);                                             /* BUT THIS DOES......WHY?*/
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [session]);

  if (localSession) {
    return <Redirect to="/gamesession" />;
  }

return (
   <Fragment>
        <div>
          <section> 
          <button className="createGame"/> // a button that opens <CreateGame> modal component
          <button className="joinGame"/> // a button that opens <JoinGame> modal component
/*Note I have skipped the event handler functions for the two buttons here for readability*/
          </section>
          <CreateGame
            ref={createGameRef}
            decks={decks || []}
            setGame={({ playerLimit, deckId }) =>
              createSession(playerLimit, deckId) // call to back end api that populates 'session' state
            }                                    // as a return payload using redux store
          />

/* MY PROBLEM STARTS HERE: the CreateGame component returns an object which easily calls createSession axios
 request to the back end. The JoinGame only changes the joinIndex state on the front end which is the
 index of the session to join in the foundgames array. The objects in this array are exactly the same as the
 localSession object which triggers re-render for CreateGame. But the useEffect hook above that watches
 changes to joinIndex does not trigger a re-render and hence re-direct to gamesession unlike the 
 useEffect that watches 'session'. */ 

          <JoinGame
            ref={joinGameRef}
            foundgames={foundgames}
            setSessionToJoinIndex={(ind) => setJoinIndex(ind)} /* JoinGame returns the index of the 
                                                                  foundgames array that the user chose
                                                                  which in turn helps to set the 
                                                                  localSession */
          />
        </div>
   </Fragment>
    );

};
评论