使用动态对象创建Context

Question

1. 静态对象

要基于静态对象创建上下文，我使用以下代码：

import React, { createContext } from 'react';

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

const UserContext = createContext(user);

export default UserContext;

这段代码工作正常。

2. 动态对象

但是如果我需要在获取数据后创建上下文，我使用以下代码：

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)返回对象。相反，选项 2console.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

我建议的一件事是将这个逻辑转移到反应组件本身。您需要如何使用 Provider，在其中将值设置为消费者需要消耗的值。useEffect 是执行异步更新的好方法，就像您的要求一样。因此，使用状态变量作为提供程序的值。在 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>
  );
}

虚拟消费者.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 上下文值提供