如何在不等待本机反应的情况下获取 AsyncStorage 数据？答案

【问题标题】：How to get AsyncStorage data without waiting in react native?如何在不等待本机反应的情况下获取 AsyncStorage 数据？
【发布时间】：2020-07-07 16:19:13
【问题描述】：

我在尝试从 AsyncStorage 检索数据时遇到问题，我不能直接分配这样的状态，因为它总是返回未定义的，我该如何避免这种情况？

export default class ListTodo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
    };
  }
  componentDidMount() {
    //promise 
    GetDataAsyncStorage('@TODOS').then((data) => {
      this.setState({
        data: data,
      });
    });
  }
  render() {
    const {data} = this.state;
    console.log(data); // undifined
    return (
      <>
        <Header />
        <View>
          <FlatList
            data={data}
            renderItem={({item}) => <TodoItemComponent data={item} />}
            keyExtractor={(item) => item.id}
          />
        </View>
      </>
    );
  }
}

这是我从 asynStorage 获取数据的函数

export const GetDataAsyncStorage = async (key) => {
  try {
    let data = await AsyncStorage.getItem(key);
    return {status: true, data: JSON.parse(data)};
  } catch (error) {
    return {status: false};
  }
};

【问题讨论】：

标签： javascript react-native async-await

【解决方案1】：

添加状态变量isLoading，从AsyncStorage获取数据后切换

小吃：https://snack.expo.io/@ashwith00/async

代码：

export default class ListTodo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      isLoading: false,
    };
  }
  componentDidMount() {
    this.getData();
  }

  getData = () => {
    this.setState({
      isLoading: true,
    });
    //promise
    GetDataAsyncStorage('@TODOS').then((data) => {
      this.setState({
        data: data,
        isLoading: false,
      });
    });
  };
  render() {
    const { data, isLoading } = this.state;

    return (
      <View style={styles.container}>
        {isLoading ? (
          <ActivityIndicator />
        ) : data.data ? (
          <FlatList
            data={data}
            renderItem={({ item }) => <Text>{item}</Text>}
            keyExtractor={(item, i) => i.toString()}
          />
        ) : (
          <Text>No Data Available</Text>
        )}
      </View>
    );
  }
}

【讨论】：

检查小吃链接它在那里工作，并告诉你遇到了什么错误

【解决方案2】：

因为AsyncStorage本身是异步读写的，等待几乎是必须的，当然也可以通过另一种方式来实现，比如创建内存对象，将内存对象和AsyncStorage绑定，这样就可以同步读取AsyncStorage了。

例如使用下面的开发库可以帮助你轻松实现AsyncStoragereact-native-easy-app的同步读取

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

【讨论】：