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

Question

我有一个带有 useEffect 挂钩的功能组件 App，我正在尝试让 <Redirect> 子组件在状态更改时重新呈现，特别是调用到 setUserInSystem，它应该更新 userInSystem，它在 render 方法中被显式引用。但是，当 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);

在获取解析后将获取设置加载到 false。

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

然后在 return:

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

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

Child component not re-rendering even though parent state is updated using hooks

reactjs

react-hooks

use-effect