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

Question

我正在学习 React，现在正在尝试实现使用 Context 的旧方法 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;

然后我在 app.js

中渲染 <Test1 />

Answer 1

I then render < Test1 /> in app.js

您需要呈现 Test2，因为您在那里定义了上下文提供程序。以下是完整工作代码的 link。

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

Answer 2

您正在使用 Test1 组件，该组件消耗 Test0，一个您希望提供值的上下文，但在 Test0你没有提供任何价值。您错误地在单独的 Component、Test2 中实现了提供程序，您没有渲染，因此 Test0 不知道提供的值，并且假设您没有'定义上下文。

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

React App is giving error when using context API

javascript

reactjs

react-context