如何在自定义组件中显示异步存储中的数据？

Question

我是新来的反应-本地人。所以，我有一个名为任务的自定义组件，我有一些数据存储在Asyncstore中。我已经检查了数据是否确实通过另一个组件/模态存储在Asyncstore中。但是当我试图从Asyncstore获取数据时（请参阅下面的代码），它不会显示任何内容。我的自定义组件显示数据很好，只是无法从Asyncstore获取/显示数据。我是不是做错了什么？请帮帮我。

函数的内部调用：

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

Answer 1

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

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

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。

Answer 2

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

js prettyprint-override">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

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