React Js:初始化前无法访问上下文

Question

我正试图使用上下文在我的项目中创建一个新的体系结构，但我开始收到以下错误：

[未捕获的ReferenceError:初始化前无法访问"ProviderContext"]：https://i.stack.imgur.com/0DFhP.png

这是我的App.js:

import React, { Component } from 'react';
import ProviderManager from './Providers/ProviderManager';

export default class App extends Component {
componentDidMount() {
document.getElementById("root").classList.add("main");
}
render() {
return (
<ProviderManager />
)
}
}

这是我的ProviderManager组件：

import React, { Component } from "react";
import RequestService from "./RequestService";
export const { ProviderContext } = React.createContext({
test: "test",
}); 
export default class ProviderManager extends Component {
constructor(props) {
super(props)
this.state = { 
loading: true,
text: "Test text"
}
}
addService = (name = "", service = {}) => {
this.setState({
[name]: service
})
}
componentDidMount() {
this.setState({
loading: false
})
}

render() {
return this.state.loading ?
(
<p>Loading</p>
) : 
(
<ProviderContext.Provider value={this.state}>
<RequestService />
</ProviderContext.Provider>
)   
}
}

这是我的RequestService组件

import { Component } from "react";
import { ProviderContext } from "./ProviderManager";
export default class RequestService extends Component
{
static contextType = ProviderContext;

componentDidMount() {
console.log(this.context)
}

render() {
return <p>Request Service</p>
}
}

此外，这是我的包.js

{
"name": "goldpocket-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.24.0",
"chart.js": "^3.7.1",
"react": "^17.0.2",
"react-chartjs-2": "^4.0.1",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"sass": "^1.49.7",
"universal-cookie": "^4.0.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/react": "^17.0.39",
"eslint": "^8.9.0",
"typescript": "^4.5.5"
}
}

你能帮我找出我到底做错了什么吗？

Answer 1

我认为问题出在这里：

export default class RequestService extends Component
{
static contextType = ProviderContext;

componentDidMount() {
console.log(this.context)
}

render()enter code here {
return <p>Request Service</p>
}
}

静态声明意味着其他类不能使用该变量，即使它们继承了类属性。只要删除contextType的静态属性就可以使其工作。

Answer 2

这是因为你试图在应用程序处于加载状态时访问它：

render() {
return this.state.loading ?
(
<p>Loading</p>
) : 
(
<ProviderContext.Provider value={this.state}>
<RequestService />
</ProviderContext.Provider>
)   
}

只需删除tenary表达式即可始终返回上下文，并以不同的方式处理加载状态(例如，将其移动到主应用程序部分。