React Native AsyncStorage 未获取值

Question

constructor(props) {
  super(props);
  this.state = { data: '' } ;
}

componentWillMount = () => AsyncStorage.getItem('restaurants').then((value) => this.setState({data: value}))

    return (
  <View>
  {this.state.data.map((item) => {
    return (
      <View>
        <Text> {item.name} </Text>
        <Text> {item.time} </Text>
      </View>
    )
  })
  }
  </View>
)

我正在尝试获取 AsyncStorage 中的值，但我不断收到错误消息：undefined is not a function(evaluating 'this.state.data.map)。我一直在搜索类似的主题，但没有找到任何解决方案。有人可以告诉我一个正确的例子吗？谢谢

Answer 1

在 AsyncStorage 之前尝试 await，类似于或内联

componentWillMount (){
  const rest = await AsyncStorage.getItem('restaurants');
}

Answer 2

如果您以这种方式存储过数据

  
  storeData = async () => {
  
    try {
      var data ={ 
       restaurants: [
        {
          name: 'MacD ',
          time: "Morning"
        },
        {
          name: 'PizzaHouse',
          time: "Evening"
        }
      ]
     }
     await AsyncStorage.setItem('restaurants', JSON.stringify(data.restaurants))
     
    } catch (error) {
      // Error saving data
    }
  }

constructor(props) {
  super(props);
  this.state={
    fetchingData: true,
    data: []
  }   
}

getData =  async()=>{
  try {
    data = await AsyncStorage.getItem('restaurants');
    this.setState({fetchingData: false , data:JSON.parse(data)})
  } catch(error){
     console.log(error)
  }
}

componentDidMount(){
  this.getData();
}

renderRestaurant(){
  return this.state.data.map((item) => {
    return (
      <View>
        <Text> {item.name} </Text>
        <Text> {item.time} </Text>
      </View>
    )
  })

}  

render() {
  return (
    <View style={{width:200, height:200, justifyContent:'center', alignItems:'center', backgroundColor:"blue"}}>
      {this.state.fetchingData ? null : this.renderRestaurant()}
    </View>
  );
};

React Native AsyncStorage 未获取值

React Native AsyncStorage not getting the value

react-native

asyncstorage