如何在本机反应中更新子组件的使用上下文变量

Question

我正在使用 useMemo 和 useContext 挂钩在我的 react 本机应用程序中存储登录和注销状态。

import { AuthContext } from "./src/app/context";



export default () => {
  const [isLoading, setIsLoading] = React.useState(true);
  const [userToken, setUserToken] = React.useState(null);
  const [userType, setUserType] = React.useState(null);
  const [fontsLoaded, setFontsLoaded] = React.useState(false);
  
  const authContext = React.useMemo(() => {
    return {
      signIn: (userType) => {
        setUserToken("dummy");
        setUserType(userType);
      },
      signUp: () => {
        setIsLoading(false);
      },
      signOut: () => {
        setIsLoading(false);
        setUserToken(null);
      },
      showBottomNavigation: false
    };
  }, []);

  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);

  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        <RootStackScreen userToken={userToken} userType={userType}/>
      </NavigationContainer>
    </AuthContext.Provider>
  );
};

上下文 js 文件如下所示：

import React from "react";

export const AuthContext = React.createContext();

我想从子组件更新 showBottomNavigation（在 useMemo 对象中）。

我是这些概念的新手，任何建议如何更新 showBottomNavigation 并使用它。

Answer 1

您可以使用状态来更改值。您的子组件可以更改状态，进而可以更改上下文的值。

import { AuthContext } from "./src/app/context";



export default () => {
  const [isLoading, setIsLoading] = React.useState(true);
  const [userToken, setUserToken] = React.useState(null);
  const [userType, setUserType] = React.useState(null);
  const [fontsLoaded, setFontsLoaded] = React.useState(false);

  const [bottomNavigation, setBottomNavigation] = useState(false);
  
  
  const authContext = React.useMemo(() => {
    return {
      signIn: (userType) => {
        setUserToken("dummy");
        setUserType(userType);
      },
      signUp: () => {
        setIsLoading(false);
      },
      signOut: () => {
        setIsLoading(false);
        setUserToken(null);
      },
      showBottomNavigation: false
    };
  }, []);

  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);

  return (
    <AuthContext.Provider value={...authContext,showBottomNavigation:bottomNavigation }>
      <NavigationContainer>
        <RootStackScreen userToken={userToken} userType={userType}/>
        <Text onPress={()=>setBottomNavigation(true)}>Change Bottom Nav</Text>
      </NavigationContainer>
    </AuthContext.Provider>
  );
};