Блог

Я очень новичок в реагировании — так что потерпите меня.

Я пытаюсь создать набор защищенных от аутентификации маршрутов/компонентов. У меня есть приведенный ниже код, который я использую для достижения этой цели.

Однако моя проблема заключается в том, что при загрузке дочернего компонента userInfo {} он (т. е. не задан). Я знаю, что userInfo данные возвращаются из userService , так как мои console.log возвращает правильные данные.

Правильно ли я поступаю? Я хочу иметь возможность защитить компонент/маршрут и пройти по userInfo любому защищенному маршруту, чтобы я мог работать с данными в соответствующем компоненте.

 const UserAuthenticatedRoute = ({component: Component, ...rest}) =gt; {  const [isLoggedIn, setIsLoggedIn] = useState(false);  const [userInfo, setUserInfo] = useState({});   useEffect(async () =gt; {  const r = await userService.isUserLoggedIn();  console.log(r.status);   if (r.status === 200){  setIsLoggedIn(true);  const userInfo = await r.json();  console.log(userInfo);  setUserInfo(userInfo);  } else {  setIsLoggedIn(false);  }  }, []);   return (  lt;Route {...rest} render={props =gt; (  lt;gt;  lt;maingt;  {isLoggedIn amp;amp;  lt;Component {...props} userInfo={userInfo}/gt;  }  lt;/maingt;  lt;/gt;  )}  /gt;  ); };