![](/img/trans.png)
[英]how to solve Cannot read property 'push' of undefined on react-native?
[英]Cannot read property 'state' of undefined in react-native context api?
我正在尝试在我的应用程序中使用上下文API。 但我收到此错误。 TypeError:TypeError:无法读取未定义的属性“ number”。 我的代码有什么问题?
appContext.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;
homeScreen.js
import { AppContext } from './appContext';
<AppContext.Consumer>
{(context) => context.number}
</AppContext.Consumer>
这是因为您没有在App的任何地方使用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
并且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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.