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

Question

我是本机反应的新手。 因此，我有一个名为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')}/>

Answer 1

您必须将此代码放入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>
 )
 }

Answer 2

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

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}/>

Answer 3

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

因此，更好的方法是增加加载，直到您接收到数据。

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.
 })
  }

当加载为true时，可以呈现一个加载组件，或者为null。