Блог

Главная - Вопросы по программированию - React useState не обновляет пользовательский интерфейс после обновления страницы

React useState не обновляет пользовательский интерфейс после обновления страницы

#javascript #reactjs #firebase #firebase-authentication

#javascript #reactjs #firebase #firebase-аутентификация

Вопрос:

Я использую Firebase onSnapshot для обновления моего текущего пользователя.

Я сохраняю состояние, используя UseState и прослушивая изменения Firebase UseEffect .

Он отлично работает при первом запуске приложения, но когда я обновляю страницу (ctrl R), он перестает работать.

В настоящее время я пытаюсь отправить эти данные с помощью Context Provider и получить к ним прямой доступ Context Consumer , но, конечно, после того, как я исправлю эту ошибку, я заменю ее настоящими компонентами.

Это мой App.js код:

 const App = () => {
  const [loggedUser, setLoggedUser] = useState(null);
  
  useEffect(() => {
    firebaseHandler.listenToUserUpdates((currentUser) => {
      setLoggedUser(currentUser);
      console.log('Updated');
    });
  }, []);

  if (loggedUser == null) {
    return <Login />;
  }

  return (
    <CurrentUserContext.Provider value={{loggedUser, setLoggedUser}}>
      <CurrentUserContext.Consumer>
        {value => <h1>{value.loggedUser.production.name}</h1>}
      </CurrentUserContext.Consumer>
    </CurrentUserContext.Provider>
  );
}

И это код для firebaseHandler.listenToUserUpdates :

 listenToUserUpdates(onChange) {
    this.auth.onAuthStateChanged((user) => {
        if(user == null) {
            onChange(null);
            return;
        }

        this.fetchCurrentUserAndProduction(user.uid, (currentUser) => { //Production is another doc on Firebase Firestore which I fetch and attach to the user's object
            onChange(currentUser);
        });
    });
}

Комментарии:

1. Когда вы говорите «перестает работать», что вы имеете в виду? Что вы видите? Есть ли шанс, что вы можете настроить демонстрационный репозиторий, чтобы мы могли взглянуть на него?

2. @LukeStorry Пользовательский интерфейс не изменяется. Даже несмотря на «обновленную» консоль. вызывается журнал. Поэтому setLoggedUser по какой-то причине пользовательский интерфейс не обновляется

3. Если вы запустите этот код в отладчике и пройдетесь по каждой строке, какая строка не выполняет то, что вы ожидаете от нее при перезагрузке?

4. Попробуйте расширить console.log , чтобы также вывести значение currentUser переменной.