Question

我有一个带有App钩子的功能组件useEffect，我正在尝试让<Redirect>子组件在状态变化时重新呈现，特别是对{ {1}}，应更新setUserInSystem，该方法在render方法中已明确引用。但是，当userInSystem更改时，该组件不会重新呈现，我不知道为什么。（请注意：异步函数userInSystem和getUserInfo均按预期方式工作并正在检索正确的数据。）

getUserByWorkEmail

Answer 1

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

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>

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

即使使用挂钩更新了父状态，子组件也不会重新呈现

2 个答案: