如何使用服务器中的数据设置Context.Provider值

Question

我是新手，所以请对我放松。

我所要做的就是用从服务器(Main.js内部(返回的数据设置Context.Provider值；然后从子组件(Home.js(访问该上下文数据

在下面的代码块中，我用从我的服务器返回的数据设置状态&在render方法中将添加到我的Context.Provider值。

UserContext.js

import React from 'react';
const UserContext = React.createContext(null);
export const UserProvider = UserContext.Provider;
export const UserConsumer = UserContext.Consumer;
export default UserContext;

Main.js

constructor(props) {
// axios.defaults.baseURL = 'http://localhost:1010/';
super(props);
this.state = {
user: {}
};
fetchUser = async () => {
let jwt = localStorage.getItem('auth-jtw');
let url = "http://localhost:8000/api/user";
let headers =  {
"Content-type": "application/json; charset=UTF-8",
"Authorization": 'Bearer ' + jwt
};

let userData = await fetch(url, {
method: 'GET',
headers: headers});

let user = await userData.json()
this.setState({ user });
};

componentDidMount() {
this.fetchUser();
}

然后在我的render((钩子中使用state.user，如下所示：

render() {

// this is being called twice, the first time the user object is empty & the second it has data.
console.log('USER:', this.state.user);
return (
<div>
<UserProvider value={this.state.user}>

问题是render方法似乎被调用了两次，在第一次调用时，this.state.user是一个空对象&在第二次调用中，它具有从服务器返回的用户数据。

当我尝试访问子组件(Home.js(中的用户上下文时，它会返回一个空对象，但我知道我设置得正确，因为例如，如果我将<UserProvider value={this.state.user}>硬编码为<UserProvider value="Test1234">，它会在我的子组件中返回

Home.js(我试图通过Main.js的conext api传递给用户的子组件(

import React, { Component, useContext } from "react";
import Card from "../components/Card/Card.tsx";
import ClientLayout from './layouts/client/Client';
import  UserContext from "../contexts/UserContext";
class Home extends Component {
static contextType = UserContext;
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
const user = this.context;

console.log('HOME PAGE USER IS: ', user);

如有任何帮助或指导，我们将不胜感激。

Answer 1

发生这种情况似乎是因为在Home.js中，您将this.context记录在componentDidMount上，因此，您只能获得刚刚安装Home组件时上下文的值(上下文更新或重新渲染时不会再次触发此挂钩(。

尝试在componentDidUpdate或render中运行此代码：

const user = this.context;

console.log('HOME PAGE USER IS: ', user);