如何在React Native中无需等待即可获取AsyncStorage数据？

Question

我在尝试从 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); // undefined
    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};
  }
};

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

Answer 2

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

例如使用以下开发库可以帮助您轻松实现AsyncStorage的同步读取react-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);