异步存储不更新用户界面渲染 jsx

Question

我对异步存储和原生反应非常陌生。我正在尝试将数据/json异步保存在持久存储中。然后读回来并在 UI 上显示。

以下是我尝试过的：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, FlatList, Image} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';


const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {


  getData = async () => {
    try {
      const value =  AsyncStorage.getItem('@storage_Key')
      if(value !== null) {
        // value previously stored
        this.setState({
          datasource: JSON.parse(value)
         })
      }else{
        fetch('https://jsonplaceholder.typicode.com/photos', {
          method: 'GET'
       })
       .then((response) => response.json())
       .then((responseJson) => {
          console.log(responseJson);
          this.setState({
            datasource: responseJson
           })
          try {
             AsyncStorage.setItem('@storage_Key',JSON.stringify(responseJson))
          } catch (e) {
            // saving error
          }

       })
       .catch((error) => {
          console.error(error);
       });
      }
    } catch(e) {
      // error reading value
    }
  }


  constructor(props){
    super(props);
    this.state={
          datasource:'hello world'
    };
}

componentDidMount = () => {

  this.getData.bind(this);

}
render() {
  return (
     <View style = {{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }}>
   <FlatList
   data = {this.state.datasource}
   renderItem={({item}) => 
   <View>
   <View style = {{
      flex: 1,
      flexDirection : 'row'
    }}>

<Image
          style={{width: 50, height: 50}}
          source={{uri: item.thumbnailUrl}}
        />
<View>
   <Text> albumId > {item.albumId} </Text> 
   <Text> id > {item.id} </Text>
   <Text> title > {item.title} </Text>
   </View>
    </View>


   <View
  style={{
    borderBottomColor: 'orange',
    borderBottomWidth: 5,
  }}
/>
   </View>
   }
   />
     </View>
  )
}
}

以下是输出： 谢谢！

编辑 1：

getData = async () => {
try {
  const value = await AsyncStorage.getItem('@storage_Key')
  if(value !== null) {
    // value previously stored
    this.setState({
      datasource: JSON.parse(value)
     })
  }else{
    fetch('https://jsonplaceholder.typicode.com/photos', {
      method: 'GET'
   })
   .then((response) => response.json())
   .then((responseJson) => {
      console.log(responseJson);
      this.setState({
        datasource: responseJson
       })
      try {
        await AsyncStorage.setItem('@storage_Key',JSON.stringify(responseJson))
      } catch (e) {
        // saving error
      }

   })
   .catch((error) => {
      console.error(error);
   });
  }
} catch(e) {
  // error reading value
}

}

更新到异步后出现错误：

Answer 1

getItem 和 setItem 是异步操作...你需要等待它：

  const value =  await AsyncStorage.getItem('@storage_Key')

-

   .then(async (responseJson) => {
      console.log(responseJson);
      this.setState({
        datasource: responseJson
       })
      try {
        await AsyncStorage.setItem('@storage_Key',JSON.stringify(responseJson))
      } catch (e) {
        // saving error
      }

   })