Return 仅当 API returns 来自 React 后端的成功响应时来自函数

Question

我需要有关 react-router-6.Actually 中私有路由的帮助，我想 return 只有当后端 API return 成功时回复。请看下面的代码片段，

export default function PrivateOutlet() {
const dispatch = useDispatch();

useEffect(() => {
    dispatch(getCurrentUser())
    .then((res) => {
        localStorage.setItem('id', res.id);
    })
    .catch(error => console.log(error) );
}, [);
return   (localStorage.getItem('id') !== "undefined") ? <Outlet /> : <Navigate to="/login" />
};

这里的问题是，在 return 从 getCurrentUser() API 这个函数 PrivateOutlet return 的值获得成功响应之前。你能帮忙吗？

Answer 1

如果您真正想要的是使用 getCurrentUser 操作来获取 id，则 localStorage 似乎完全 extraneous/superfluous。使用与已验证或未验证的 id 值不匹配的本地状态 id。等到 id 状态被填充以呈现 Outlet 或重定向。

示例：

export default function PrivateOutlet() {
  const [id, setId] = React.useState();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getCurrentUser())
      .then((res) => {
        setId(res.id); // valid id or null
      })
      .catch(error => {
        console.log(error);
        setId(null);
      );
  }, []);

  if (id === undefined) return null; // or loading indicator/spinner/etc

  return (id)
    ? <Outlet />
    : <Navigate to="/login" replace />
};

如果想继续使用 localStorage，则使用本地“正在加载”状态并有条件地呈现 null 或一些加载指示器，直到获取当前用户 ID。另外，我不确定这是否是一个错字，但您很可能打算将 localStorage 的值与 undefined 而不是 [=33 进行比较=] 字符串文字 "undefined"。这仍然有效，因为加载状态更新触发了重新渲染，并且组件可以读取刚刚在 localStorage 中设置的 id 值。

示例：

export default function PrivateOutlet() { const [isLoaded, setIsLoaded] = React.useState(false); const dispatch = useDispatch(); useEffect(() => { dispatch(getCurrentUser()) .then((res) => { localStorage.setItem('id', res.id); }) .catch(error => { console.log(error); localStorage.removeItem('id'); ) .finally(() => setIsLoaded(true)); }, []); if (!isLoaded) return null; // or loading indicator/spinner/etc return (localStorage.getItem('id') !== undefined) ? <Outlet /> : <Navigate to="/login" replace /> };

Return 仅当 API returns 来自 React 后端的成功响应时来自函数

Return from a funtion only when API returns a success response from backend in React

javascript

promise

reactjs

react-router