在 React-Native 函数中使用异步渲染子节点答案

【问题标题】：Render child using async in function React-Native在 React-Native 函数中使用异步渲染子节点
【发布时间】：2020-07-07 02:18:16
【问题描述】：

我看到很多类似的答案，但到目前为止没有人适合我。如果有登录数据，我想从 AsyncStorage 获取数据并呈现一个页面，但如果没有登录数据，我想呈现另一个页面。

但是我在开发这个时遇到了麻烦......

我试过这个：

export default class Routes extends React.Component {
  RetrieveData = async () => {
    try {
      const value = await AsyncStorage.getItem('login');
      if (value !== null) {
        // We have data!!
        return (
            <View>Test</View>
        );
      }
    } catch (error) {
      // Error retrieving data
    }
  };

  render() {
    return (
      {RetrieveData}
    )
  }
}

我也尝试过使用 componentDidMount 技术...但没有奏效...

我当前的代码仍然不起作用：

export default function Routes() { 
  function CheckLogged(){
    var login;

    async function checkLogin(){
      await AsyncStorage.getItem('login', (err, result) => {
        login = JSON.parse(result);
      });
    }
  
    checkLogin();


    if (login != null){
      return(
        <Stack.Navigator>
          <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
      )
    }
      
    else{
      return(
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
        </Stack.Navigator>
      )
    }
  }


  return(
    <NavigationContainer>
      <CheckLogged/>
    </NavigationContainer>
  )
}

【问题讨论】：

标签： javascript function react-native asynchronous rendering

【解决方案1】：

您正在使用 react 并设置变量这样不会导致渲染最好的方法是使用状态并利用 useeffect 挂钩从异步存储中检索您的数据。

这里使用了两个状态变量，一个用于显示加载指示器直到读取完成，另一个用于保存登录数据（如果可用）。组件挂载后会运行使用效果。并且堆栈中的屏幕是有条件地渲染的。

function Routes() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
  const [isLoaded, setIsLoaded] = React.useState(true);

  useEffect(() => {
    AsyncStorage.getItem('login').then((result) => {
      setIsLoaded(JSON.parse(result));
    });
  }, []);

  if (isLoaded) return <ActivityIndicator />;

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {isLoggedIn ? (
          <Stack.Screen name="Home" component={Home} />
        ) : (
          <Stack.Screen name="Login" component={Login} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

【讨论】：

【解决方案2】：

推荐使用react-native-easy-app，通过它可以同步访问AsyncStorage，也可以存储和检索对象、字符串或布尔数据

  import { XStorage } from 'react-native-easy-app';
  import { AsyncStorage } from 'react-native';
  // or import AsyncStorage from '@react-native-community/async-storage';

   export const RNStorage = {
       token: undefined, 
       isShow: undefined, 
       userInfo: undefined
   };
   
  const initCallback = () => {

       // From now on, you can write or read the variables in RNStorage synchronously
       
       // equal to [console.log(await AsyncStorage.getItem('isShow'))]
       console.log(RNStorage.isShow); 
       
       // equal to [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
       RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3=='; 
       
       // equal to [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ]
       RNStorage.userInfo = {name: 'rufeng', age: 30}; 
  };
  
  XStorage.initStorage(RNStorage, AsyncStorage, initCallback);

【讨论】：