createContext с использованием объекта Dynami c

Question

1. Stati c object

Чтобы создать контекст на основе объекта stati c, я использую этот код:

import React, { createContext } from 'react';

const user = {uid: '27384nfaskjnb2i4uf'};

const UserContext = createContext(user);

export default UserContext;

Этот код отлично работает.

2. Dynami c object

Но если мне нужно создать контекст после извлечения данных, я использую этот код:

import React, { createContext } from 'react';

const UserContext = () => {

    // Let's suppose I fetched data and got user object
    const user = {uid: '18937829FJnfmJjoE'};

    // Creating context
    const context = createContext(user);

    // Returning context
    return context;

}

export default UserContext;

Проблема

Когда я отлаживаю опцию 1, console.log(user) возвращает объект. Вместо этого, опция 2, console.log(user) возвращает undefined. Чего мне не хватает?

import React, { useEffect, useState, useContext }     from 'react';
import UserContext                                    from './UserContext';

const ProjectSelector = (props) => {

    const user = useContext(UserContext);

    console.log(user);

    return(...);
}

export default App;

Answer 1

я хотел бы предложить одну вещь - переместить эту логику c в сам компонент реакции. Таким образом, вам нужно использовать провайдера, в котором вы установите значение, равное значению, которое потребителям необходимо потреблять. Использование Effect - отличный способ выполнять асинхронные обновления, например, ваше требование. поэтому, используйте переменную состояния в качестве значения provider.in useEffect, вы извлекаете данные и обновляете переменную состояния, которая, в свою очередь, обновляет значение контекста. Ниже приведен код

UserContext. js

import { createContext } from "react";

const UserContext = createContext();

export default UserContext;

Приложение. js

export default function App() {
  const [user, setUser] = useState();

  useEffect(() => {
    console.log("here");
    fetch("https://reqres.in/api/users/2")
      .then(response => {
        return response.json();
      })
      .then(data => {
        setUser(data);
      });
  }, []);

  return (
    <div className="App">
      <UserContext.Provider value={user}>
        <DummyConsumer />
      </UserContext.Provider>
    </div>
  );
}

DummyConsumer. js

import React, { useContext } from "react";
import UserContext from "./UserContext";

const DummyConsumer = () => {
  const dataFromContext = useContext(UserContext);
  return <div>{JSON.stringify(dataFromContext)}</div>;
};

export default DummyConsumer;

демо: значение контекста anychronus, обеспечивающее