Блог

После того, как я зарегистрирую пользователя и отправлю user значение в свое глобальное хранилище, я пытаюсь отобразить свой dashboard компонент. Однако мой dashboard компонент не отображается, хотя у меня user установлено значение.

(Когда я регистрирую консоль, пользователь определенно настроен)

Вот где я установил пользователя:

 function App() {
  const [{ user }, dispatch] = useStateValue();
  useEffect(() => {
    // will only run once when the app component loads...

    auth.onAuthStateChanged((authUser) => {
      console.log("THE USER IS >>> ", authUser);

      if (authUser) {
        // the user just logged in / the user was logged in

        dispatch({
          type: "SET_USER",
          user: authUser.displayName,
        });
      } else {
        // the user is logged out
        dispatch({
          type: "SET_USER",
          user: null,
        });
      }
    });
  }, []);
  

И вот код, который отображает компонент:

   <Route
          path="/dashboard"
          render={() =>
            user ? (
              <DashboardLayout>
                <Dashboard />
              </DashboardLayout>
            ) : (
              <h2>No user</h2>
            )
          }
        />
  

Теперь, когда я запускаю этот код на своем локальном хосте, он NO USER мигает, а затем исчезает. Есть идеи, почему?

Вот код для моего DashboardLayout :

 const DashboardLayout = (props) => {
  return (
    <div>
      <Header {...props} />
      <div className="main">{props.children}</div>
    </div>
  );
};
  

И вот код для моей панели мониторинга:

 function index() {
  return (
    <div className="dashboard">
      <div className="dash__left">
        <Sidebar />
      </div>
      <div className="dash__middle">
        <LinkButtonTypes />
        <ContentContainer />
      </div>
      <div className="dash__right">
        <PersonalUrl />
        <PhoneMockup />
      </div>
    </div>
  );
}

export default index;
  

С помощью способа useEffect , определенного выше, он будет запускать повторный рендеринг React только при установке начального значения из-за пустого массива в качестве второго аргумента, поэтому вы не увидите никаких изменений в DOM, поскольку рендеринг не будет запущен. Возможно, вы захотите изменить второй аргумент useEffect , чтобы применять повторную визуализацию при каждом изменении user состояния, поэтому вместо пустого массива используйте [user] Я сам не пробовал, но это будет хорошим направлением для изучения.