如何在自定义组件中显示来自 AsyncStorage 的数据？答案

【问题标题】：How do I display data from AsyncStorage in a custom component?如何在自定义组件中显示来自 AsyncStorage 的数据？
【发布时间】：2019-12-30 06:54:44
【问题描述】：

我是 react-native 的新手。所以，我有一个名为 Task 的自定义组件，并且我有一些数据存储在 AsyncStorage 中。我已经检查过数据确实通过另一个组件/模式存储在 AsyncStorage 中。但是当我试图从 AsyncStorage 取回数据时（见下面的代码），它没有显示任何内容。我的自定义组件可以正常显示数据，只是无法从 AsyncStorage 获取/显示数据。我在这里做错了吗？请帮帮我。

在 render() 函数内部/调用：

  <Task name={async ()=>await AsyncStorage.getItem('taskname')}
                        desc={async ()=>await AsyncStorage.getItem('taskdesc')}
                        date={async ()=>await AsyncStorage.getItem('taskdate')}/>

【问题讨论】：

标签： react-native react-native-android

【解决方案1】：

将存储的值放入状态值中并使用。

this.state={
   name : '';
   desc : '';
   date : '';
}
...

async getdata() {
let taskname =  await AsyncStorage.getItem('taskname')
let taskdesc =  await AsyncStorage.getItem('taskdesc')
let taskdate =  await AsyncStorage.getItem('taskdate')
this.setState({
   name : taskname;
   desc : taskdesc;
   date : taskdate;
});
}
...
  <Task name={this.state.name}
                        desc={this.state.desc}
                        date={this.state.date}/>

【讨论】：

【解决方案2】：

您必须将此代码放入 componentDidMount 并调用。

constructor() {
     super();
     this.state = {
       name : '';
       desc : '';
       date : '';
     }
   }
 componentDidMount= async()=>{
 let taskname =  await AsyncStorage.getItem('taskname')
 let taskdesc =  await AsyncStorage.getItem('taskdesc')
 let taskdate =  await AsyncStorage.getItem('taskdate')

 }

 render(){
 return(
 <View>
 <Task name={this.state.name} desc={this.state.desc} date={this.state.date}/>
 </View>
 )
 }

【讨论】：

【解决方案3】：

我在这里看到了很多解决方案，但是您还应该添加loading 状态，因为您的任务组件首先会收到空字符串。

因此，更好的方法是在收到数据之前添加加载。

this.state={
   loading: true,
   name : '';
   desc : '';
   date : '';
}

async componentDidMount(){

 let taskname =  await AsyncStorage.getItem('taskname')
 let taskdesc =  await AsyncStorage.getItem('taskdesc')
 let taskdate =  await AsyncStorage.getItem('taskdate')
 this.setState({ ...set your state here}, () => {
  and then update the loading state.
 })
  }

当loading为true时，可以渲染一个loading组件，也可以为null。

【讨论】：