无法读取反应原生上下文 API 中未定义的属性'state'？

Question

我正在尝试在我的 ract-native 应用程序中上下文 api。但是我收到此错误。类型错误： 类型错误： 无法读取未定义的属性"数字"。我的代码出了什么问题？

应用上下文.js

import React from 'react';
export const AppContext = React.createContext();
class AppProvider extends React.Component {
constructor(props) {
super(props);
this.state = {
number: 10,
};
}
render() {
return 
(
<AppContext.Provider value={this.state}>
{this.props.children}
</AppContext.Provider>
)
}
}
export default AppProvider;

首屏幕.js

import { AppContext } from './appContext';
<AppContext.Consumer>
{(context) => context.number}
</AppContext.Consumer>

Answer 1

这是因为您没有在应用程序中的任何位置使用AppProvider组件。

const AppContext = React.createContext();
class AppProvider extends React.Component {
constructor( props ) {
super( props );
this.state = {
number: 10,
};
}
render() {
return (
<AppContext.Provider value={this.state}>
{this.props.children}
</AppContext.Provider>
);
}
}
class App extends React.Component {
render() {
return (
<AppProvider>
<AppContext.Consumer>
{context => context.number}
</AppContext.Consumer>
</AppProvider>
);
}
}

AppProvider在这里只是一个标准组件。它渲染上下文的Provider，并且得到一些孩子。因此，您应该在应用程序中的某个位置使用此AppProvider组件，并通过一个带有Consumer的孩子传递。

如果您想将上下文保存在单独的文件中，它将如下所示：

上下文和提供程序组件

import React from "react";
export const AppContext = React.createContext();
class AppProvider extends React.Component {
constructor( props ) {
super( props );
this.state = {
number: 1745,
};
}
render() {
return (
<AppContext.Provider value={this.state}>
{this.props.children}
</AppContext.Provider>
);
}
}
export default AppProvider;

主要部件

import React from "react";
import AppProvider, { AppContext } from "./AppProvider";
class App extends React.Component {
render() {
return (
<AppProvider>
<AppContext.Consumer>
{context => context.number}
</AppContext.Consumer>
</AppProvider>
);
}
}
export default App;