3

Appフック付きの機能コンポーネントがあり、子コンポーネントが状態の変化、特に への呼び出しで再レンダリングされるようにしよuseEffectうとしています。ただし、変更時にコンポーネントが再レンダリングされず、その理由がわかりません。(注: 両方の非同期関数と期待どおりに動作し、正しいデータを取得しています。)<Redirect>setUserInSystemuserInSystemuserInSystemgetUserInfogetUserByWorkEmail

const App = (props) => {
  const { authState, authData } = props;
  const [signedIn, setSignedIn] = useState(false);
  const [userInfo, setUserInfo] = useState(undefined);
  const [userInSystem, setUserInSystem] = useState(false);

  useEffect(() => {
    setSignedIn(!(authState !== 'signedIn'));
    const fetchUser = async () => {
      const data = await getUserInfo();
      const userFound = await getUserByWorkEmail(data);
      setUserInSystem(userFound);
      setUserInfo(data);
    };
    if (authState === 'signedIn') {
      fetchUser();
    }
  }, [authState]);


return (
    <div>
        <BrowserRouter>
            <Switch>
            <Redirect
                exact={true}
                path="/"
                to={userInSystem ? '/dashboard' : '/unverified'}
            />
            </Switch>
        </BrowserRouter>
      </LayoutProvider>
    </div>
  );
};
4

2 に答える 2

2

新しいフックを作成し、フェッチごとに変更される条件で Redirect をエンベロープします。

const [loading, setLoading] = useState(true);

フェッチでは、フェッチが解決された後に setLoading を false に設定します。

const fetchUser = async () => {
      setLoading(true);
      const data = await getUserInfo();
      const userFound = await getUserByWorkEmail(data);
      setUserInSystem(userFound);
      setUserInfo(data);
      setLoading(false);
    };

次に、リターンで：

<Switch>
{ !loading ? <Redirect
            exact={true}
            path="/"
            to={userInSystem ? '/dashboard' : '/unverified'}
        /> 
        : <div>Loading....</div> 
}
</Switch>
于 2019-07-16T07:51:25.680 に答える