React App在使用上下文API时给出错误

Question

我正在学习React，现在正试图实现使用上下文API的旧方法，但当我试图编译时，我得到一个错误。

上面写着:

TypeError: context is undefined. Version is 17.0.1

以下是我使用的文件:

Test0.js

import React from 'react';
const Test0 = React.createContext();
export default Test0;

Test1.js

import React, { Component } from 'react';
import Test0 from './Test0';
class Test1 extends Component{
render(){
return (
<Test0.Consumer>
{context => (<p>This is {context.name}</p> )}
</Test0.Consumer>
);
}
}
export default Test1;

Test2.js

import React, { Component } from 'react';
import Test0 from './Test0';
import Test1 from './Test1';
class Test2 extends Component{
state = {
name: 'James',
age : 30
}
render(){
return (
<Test0.Provider
value={{
name : this.state.name,
age: this.state.age
}}
>
<Test1 />
</Test0.Provider>
);
}
}
export default Test2;

我然后渲染<Test1 />在app.js

Answer 1

然后渲染

您需要渲染Test2，因为您在那里定义了上下文提供程序。下面是完整工作代码的链接。

CODESANDBOX链接:https://codesandbox.io/s/context-api-issue-lqkv8

Answer 2

您正在使用Test1组件，其中消耗Test0，这是一个您假设提供值的上下文，但在Test0中您不提供值。你在单独的组件Test2中错误地实现了提供者，你不渲染所以Test0不知道提供的值，它假设你没有定义上下文。