使用动态对象的创建上下文

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

我建议的一件事是将此逻辑移动到 react 组件本身。 您需要如何使用一个提供程序，您将在其中将值设置为消费者需要使用的值。useEffect 是执行异步更新的好方法，例如您的要求。 所以，使用状态变量作为值 provider.in useEffect 你获取数据并更新状态变量，这反过来将更新上下文值。 以下是代码

用户上下文.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;

演示：任意时线提供上下文值