reactjs - 即使使用钩子更新父状态，子组件也不会重新渲染

Question

我有一个App带有useEffect钩子的功能组件，我试图让<Redirect>子组件在状态更改时重新渲染，特别是对setUserInSystem应该更新的调用，它userInSystem在渲染方法中显式引用。但是，组件在更改时不会重新渲染userInSystem，我不知道为什么。（注意：两个异步函数都按预期工作并检索正确的数据。getUserInfo）getUserByWorkEmail

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>
  );
};

Answer 1

创建一个新的钩子并使用每次获取都会发生变化的条件来封装重定向：

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

在 fetch 解决后 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>

Answer 2

尝试在 useEffect 依赖数组中添加 userInSystem。

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, ***userInSystem***]);