我正试图将react上下文api与react本机类组件一起使用，但遇到了一个未定义的provider.default.c

Question

我正在创建一个名为provider的组件来存储我的数据

import React from "react";
export const MyContext = React.createContext();
export class MyProvider extends React.Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: false
};
}
render() {
return (
<MyContext.Provider
value={{
state: this.state,
changeAuthState: value => this.setState({ isAuthenticated: true })
}}
>
{this.props.children}
</MyContext.Provider>
);
}
}

我正试图从一个名为add photo的嵌套组件中使用这些数据，因此当用户完成帐户设置时，它会将数据更改为authenticated=true，并显示主堆栈

//addPhoto.js
import Provider from "../../../provider";
export default class AddPhoto extends React.Component {
constructor(props) {
super(props);
this.state = {
image: null
};
}

render() {

return (
<Provider.Consumer>
{
(context = () => (
<View style={styles.conatiner}>
<View style={styles.authIocn}>
<SimpleLineIcons name="camera" size={wp("30%")} />
</View>
<View style={styles.header}>
<Text style={styles.headerText}>Add Profile Photo</Text>
</View>
<View style={styles.paragraph}>
<Text style={styles.paragraphText}>
Add a profile photo so your friends know its you.
</Text>
</View>
<Button block style={styles.button} onPress={this._pickImage}>
<Text style={styles.buttonText}>Add a Photo</Text>
</Button>
<View style={styles.skipButtonView}>
<TouchableOpacity>
<Text style={styles.skipButtonText}>Skip</Text>
</TouchableOpacity>
</View>
</View>
))
}
</Provider.Consumer>
);
}
}

获取错误类型错误：undefined不是正在评估("_provider.default.Consumer"(的对象

Answer 1

我不得不从Provider.js 导出Provider类和上下文

import React from "react";
const MyContext = React.createContext();
class Provider extends React.Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: "false"
};
}
render() {
return (
<MyContext.Provider
value={{
state: this.state,
changeAuthState: value => this.setState({ isAuthenticated: value })
}}
>
{this.props.children}
</MyContext.Provider>
);
}
}
export { Provider, MyContext };

然后，我需要在提供者中包装我的app.js

import { Provider } from "./provider";
return (
<Provider>
<NavigationContainer>
{signedIn ? (
<TabStack.Navigator
barStyle={{
backgroundColor: "#15212B",
borderColor: "#B0B8B3",
borderTopWidth: hp("0.05")
}}
>
<TabStack.Screen name={"Feed"} component={Feed} />
<TabStack.Screen name={"Discover"} component={Discover} />
<TabStack.Screen name={"Account"} component={Account} />
</TabStack.Navigator>
) : (
<AuthStack.Navigator headerMode={false}>
<AuthStack.Screen name={"SignUp"} component={SignUp} />
<AuthStack.Screen
name={"EmailOrPhone"}
component={EmailOrPhone}
/>
<AuthStack.Screen name={"SignIn"} component={SignIn} />
</AuthStack.Navigator>
)}
</NavigationContainer>
</Provider>
);
}
}

然后最后将我的addPhoto.js文件包装在上下文中

import { MyContext } from "../../../provider";
return (
<MyContext.Consumer>
{context => (
<View style={styles.conatiner}>
<View style={styles.authIocn}>
<SimpleLineIcons name="camera" size={wp("30%")} />
</View>
<View style={styles.header}>
<Text style={styles.headerText}>Add Profile Photo</Text>
</View>
<View style={styles.paragraph}>
<Text style={styles.paragraphText}>
Add a profile photo so your friends know its you.
</Text>
</View>
<Button block style={styles.button} onPress={this._pickImage}>
<Text style={styles.buttonText}>Add a Photo</Text>
</Button>
<View style={styles.skipButtonView}>
<TouchableOpacity>
<Text style={styles.skipButtonText}>Skip</Text>
</TouchableOpacity>
</View>
</View>
)}
</MyContext.Consumer>
);
}}