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>
    );
  }
}

我正在尝试从称为添加照片的嵌套组件中使用该数据，因此当用户完成帐户设置后，它将把数据更改为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>
    );
  }
}

获取错误typeError：未定义不是评估对象（'_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>
);
  }}

我正在尝试将react context api与react native类组件一起使用，但收到未定义的错误provider.default.consumer

1 个答案: