React Context API, загрузка хука дважды. Один раз без данных и один раз с данными

Question

Я создаю приложение внутреннего реагирования с бэкэндом flask, в котором хранятся данные пользователя в сеансе flask.

Мое приложение flask использует пакет ADAL для обработки Azure Active Аутентификация пользователя в каталоге.

Чтобы получить сведения о пользователе в моем приложении реагирования, я выполняю вызовы извлечения и могу получить данные без проблем.

В своем приложении реагирования я пытаюсь использовать крючки, createContext, useContext, useState и UseState в первый раз, и по какой-то причине приложение выглядит так, как будто оно дважды загружает мой заголовок. Один раз без данных и один раз с данными

Я создал пример моей проблемы здесь https://codesandbox.io/s/new-react-context-api-ei92k it показывает в console.log Заголовок стреляет дважды.

Есть ли способ избежать этого?

Answer 1

Это не проблема

const App = () => {
  const [user, setUser] = useState({});

  useEffect(() => {
    loadProfile().then(user => setUser(user));
  }, []);

  console.log(user); // you can log here 

Вы получаете объект пользователя два раза, потому что при первом рендеринге у вас нет пользовательских данных, а во второй раз вы получаете данные пользователя из loadProfile().