[英]Cannot read property 'state' of undefined in react-native context api?
I'm trying to context api in my ract-native app. 我正在尝试在我的应用程序中使用上下文API。 But i'm getting this error.
但我收到此错误。 TypeError: TypeError: Cannot read property 'number' of undefined.
TypeError:TypeError:无法读取未定义的属性“ number”。 What is wrong my code?
我的代码有什么问题?
appContext.js 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 homeScreen.js
import { AppContext } from './appContext';
<AppContext.Consumer>
{(context) => context.number}
</AppContext.Consumer>
This is because you are not using your AppProvider
component anywhere in your App. 这是因为您没有在App的任何地方使用
AppProvider
组件。 Try like this: 尝试这样:
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
is merely a standard component here. AppProvider
在这里仅仅是一个标准组件。 It renders the context's Provider
and that one gets some children. 它呈现了上下文的
Provider
并且Provider
一些孩子。 So, you should use this AppProvider
component somewhere in your app and pass a child with a Consumer
. 因此,您应该在应用程序中的某个位置使用此
AppProvider
组件,并将带有Consumer
的子对象传递给它。
If you want to keep your context in a separate file it would be like this: 如果要将上下文保存在单独的文件中,将如下所示:
Context and provider component 上下文和提供者组件
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;
Main component 主要成分
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.