UseContext 的值未定义

Question

我想将我的用户传递到一个上下文中，以便我可以在我的应用程序的另一个地方调用他。当我将数据传递到另一个屏幕时，它是未定义的。

ERROR TypeError: undefined is not an object (evaluating 'user.name')

我创建了一个假用户来测试上下文

我用 ： “本机反应”：“0.70.5”，

    import { StatusBar } from "expo-status-bar";
    import * as WebBrowser from "expo-web-browser";
    import * as Google from "expo-auth-session/providers/google";
    import { SvgUri } from "react-native-svg";
    import { useNavigation } from "@react-navigation/native";
    import { Ionicons } from "@expo/vector-icons";
    import UserContext from "../commons/UserContext";
    
    WebBrowser.maybeCompleteAuthSession();
    const fakeUser = {
      name: "John Doe",
      picture: "...",
    };
    
    const GoogleAuth = ({ navigation }) => {
      navigation = useNavigation();
      const [accessToken, setAccessToken] = useState(null);
      const [user, setUser] = useState(fakeUser);
      const [request, response, promptAsync] = Google.useIdTokenAuthRequest({
        clientId: "clientId",
        iosClientId: "iosClientId",
        androidClientId: "androidClientId",
      });
    
      // skip because fake user in useState not importante
      useEffect(() => {
      
      }, [response, accessToken]);
    
      // skip because fake user in useState not importante
      async function fetchUserInformations() {
      
      }
    
      // importante with provider
      const ShowUserInfo = () => {
        if (user) {
          return (
            <UserContext.Provider value={user}>
              <View style={styles.container}>
                <Text style={styles.text}>Successfully connected</Text>
                <Text style={styles.text}>Welcome</Text>
                <Image
                  source={{ uri: user.picture }}
                  style={styles.picture}
                ></Image>
                <Text style={styles.subText}>{user.name}</Text>
                <Button
                  disabled={!request}
                  title="Acceder au tableau de bord"
                  onPress={() => {
                    navigation.navigate("MapTab", {
                      screen: "Home",
                      params: { user: user },
                    });
                  }}
                />
              </View>
            </UserContext.Provider>
          );
        }
      };
   

   return (
        <View style={styles.container}>
          <StatusBar style="auto" />
          // if there is user
          {user && <ShowUserInfo />}
          // if there is no user
          {user === null && (
            <>
              <View>
                <Text style={styles.text}>Welcome</Text>
                <Text style={styles.subText}>Please Login</Text>
                <TouchableOpacity
                  disabled={!request}
                  onPress={() => {
                    promptAsync();
                  }}
                >
                  <SvgUri width="35%" height="35%" uri=".svg" />
                </TouchableOpacity>
              </View>
            </>
          )}
        </View>
      );
    };

我的 UserContext.js

import { createContext } from "react";

const UserContext = createContext({});

export default UserContext;

首页.js

import React, { useContext, useEffect } from "react";
import { StyleSheet, Text, View, Image, Button } from "react-native";
import { StatusBar } from "expo-status-bar";
import { useFocusEffect, useNavigation } from "@react-navigation/native";
import UserContext from "../commons/UserContext";


const Home = ({ navigation }) => {
  navigation = useNavigation();

  const { user } = useContext(UserContext);

  useEffect(() => {
    return () => {
      console.log("User logged in", user);
    };
  }, [user]);

  useFocusEffect(
    React.useCallback(() => {
      const unsubscribe = navigation.addListener("beforeRemove", (e) => {
        e.preventDefault();
      });

      return unsubscribe;
    }, [navigation])
  );

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.banner}>
        <View style={styles.leftContent}>
          <Button
            color={"#008080"}
            title="go to map"
            onPress={() => {
              navigation.navigate("Planisphere");
            }}
          />
        </View>
        <View style={styles.rightContent}>
          <View style={styles.rightTextContent}>
            <Text style={styles.name}>
              {user.name ? user.name : user.email}
            </Text>
          </View>
          {user.picture ? (
            <Image source={{ uri: user.picture }} style={styles.picture} />
          ) : null}
        </View>
      </View>
    </View>
  );
};

我尝试将我的用户存储在我的 UserContext 中，以便我可以在其他地方调用它。

Answer 1

您显示的日志输出基本上是一个私有 API，而不是您应该关心的。要从上下文中读取，您需要在提供程序内部的组件中使用 useContext。记录 UserContext 本身不会给你任何有价值的东西。

import { StatusBar } from "expo-status-bar";
import * as WebBrowser from "expo-web-browser";
import * as Google from "expo-auth-session/providers/google";
import { SvgUri } from "react-native-svg";
import { useNavigation } from "@react-navigation/native";
import { Ionicons } from "@expo/vector-icons";
import UserContext from "../commons/UserContext";

WebBrowser.maybeCompleteAuthSession();
const fakeUser = {
  name: "John Doe",
  picture: "...",
};

const UserInfo = () => {
  const user = useContext(UserContext);
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Successfully connected</Text>
      <Text style={styles.text}>Welcome</Text>
      <Image source={{ uri: user.picture }} style={styles.picture}></Image>
      <Text style={styles.subText}>{user.name}</Text>
      <Button
        disabled={!request}
        title="Acceder au tableau de bord"
        onPress={() => {
          navigation.navigate("MapTab", {
            screen: "Home",
            params: { user: user },
          });
        }}
      />
      <Button
        title="LogContextUser"
        onPress={() => {
          console.log("context", user);
        }}
      />
    </View>
  );
};

const GoogleAuth = ({ navigation }) => {
  navigation = useNavigation();
  const [accessToken, setAccessToken] = useState(null);
  const [user, setUser] = useState(fakeUser);
  const [request, response, promptAsync] = Google.useIdTokenAuthRequest({
    clientId: "clientId",
    iosClientId: "iosClientId",
    androidClientId: "androidClientId",
  });

  // skip because fake user in useState not importante
  useEffect(() => {}, [response, accessToken]);

  // skip because fake user in useState not importante
  async function fetchUserInformations() {}

  // importante with provider
  const ShowUserInfo = () => {
    if (user) {
      return (
        <UserContext.Provider value={user}>
          <UserInfo />
        </UserContext.Provider>
      );
    }
  };