Question

我在App.js文件中使用了一个useEffect挂钩。它将数据放入需要在我的App中使用的redux存储中。但是它在useEffect运行之前渲染，因此数据是不确定的。然后useEffect可以正确运行。我需要useEffect在呈现任何内容之前运行。我该怎么办？还是我应该使用其他解决方案？我尝试完全删除useEffect并仅运行操作，但这导致它不断运行。这是我的代码：

function App() {
  const app = useSelector(state => state.app);
  const auth = useSelector(state => state.auth);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(authActions.checkUser());
  }, [dispatch]);

  console.log(auth.user); //undefined

  return (
    <ThemeProvider theme={!app.theme ? darkTheme : theme}>
      <CssBaseline />
      <React.Fragment>
        {/* TODO: Display drawer only when logged in */}
        {/* <Drawer></Drawer> */}
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/dashboard">
            <Dashboard user={auth.user} /> //auth.user is undefined when this gets rendered
          </Route>
          <Route exact path="/register" component={Register} />
        </Switch>
      </React.Fragment>
    </ThemeProvider>
  );
}

export const checkUser = () => async dispatch => {
  let token = localStorage.getItem("auth-token");
  if (token === null) {
    localStorage.setItem("auth-token", "");
    token = "";
  }
  const tokenRes = await Axios.post("http://localhost:5000/users/tokenIsValid", null, {
    headers: { "x-auth-token": token }
  });
  if (tokenRes.data) {
    const userRes = await Axios.get("http://localhost:5000/users/", {
      headers: { "x-auth-token": token }
    });
    dispatch({
      type: CHECK_USER,
      token,
      user: userRes.data
    });
  }
};

Answer 1

我需要useEffect在呈现任何内容之前运行。我该怎么办那？

您不能使useEffect在初始渲染之前运行。

就像类组件中的componentDidMount在初始渲染之后运行一样，useEffect在初始渲染后运行之后，其执行取决于是否您将第二个参数（即依赖项数组）传递给useEffect钩子。

我还应该使用什么其他解决方案？

您可以有条件地呈现内容，方法是确保仅在可用后才呈现异步获取的数据。

。

return (
   { auth ? <render content> : null}
);

或

return (
   { auth && <render content> }
);

PS：尖括号< or >不包含在语法中。它们只是作为您需要呈现的内容的占位符。

有关详细信息，请参见：React - Conditional Rendering

在呈现组件之前先运行useEffect钩子

1 个答案: