无法在 React Native 中使用 AsyncStorage 存储和检索数据

Posted 2023-03-07

【中文标题】无法在 React Native 中使用 AsyncStorage 存储和检索数据

【英文标题】：Cannot Store and Retrieve data using AsyncStorage in React native

【发布时间】：2017-06-14 12:08:38

【问题描述】：

我是 react native 的新手，我现在刚刚学习 react native，我试图从 TextInput 存储值并通过单击注册按钮存储到 AsyncStorage 中。我试图通过单击获取按钮来获取该值。我可以' t 从 AsyncStorage.getItem('value') 中获取值，后来我认为数据是否存储在 AsyncStorage.setItem('name','value') 中。有人看看这段代码并告诉我我犯错的答案.

export default class AsyncStorageEample extends Component 


constructor(props)

super(props)

  this.state=  name:'', email:'',mobile:''
  this.onRegisterPress=this.onRegisterPress.bind(this)
  this.onRetreive=this.onRetreive.bind(this)



onRegisterPress()

   let name=this.state.name
   let email=this.state.email
   let mobile=this.state.mobile

   AsyncStorage.setItem('name',name)
   AsyncStorage.setItem('email',email)
   AsyncStorage.setItem('mobile',mobile)

   this.setState(name: name, email:email,mobile:mobile)




onRetreive()

  var user;
  user= AsyncStorage.getItem('name').then((value) => this.setState( 'name': value ))

  Alert.alert('Name:'+user);


render() 
    return (
        <View style=styles.container>
        <View style=styles.Signupform>

        <Text style=styles.textStyle> Name </Text>
        <TextInput style=styles.tInRegister onChangeText=(text)=>   this.setState(name: text) value = this.state.name/>

        <Text style=styles.textStyle> Email </Text>
        <TextInput style=styles.tInRegister onChangeText=(text)=> this.setState(email: text) value= this.state.email />

        <Text style=styles.textStyle> Mobile </Text>
        <TextInput style=styles.tInRegister onChangeText=(text)=> this.setState(mobile: text) vaue= this.state.mobile />

        <Button 
         onPress=this.onRegisterPress.bind(this)
         title="Register"
         color="#841584"
        />

        <Button
        style=styles.get
        onPress=this.onRetreive.bind(this)
        title="Get"
        color="#841584"/>
        </View>
        </View>
    );
 
 

   const styles = StyleSheet.create(
       container: 
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',

            backgroundColor: '#F5FCFF',
        ,

        tInRegister: 
            fontSize: 16,
            height: 40,
            color: '#800080'
        ,
        textStyle: 
            fontSize: 16,
            color: '#800080'
        ,
        Signupform: 
            width: 400,
            height: 100,
            justifyContent: 'center',
            marginTop: 10,
            marginLeft: 10,
            marginRight: 10

        ,
        get:
        
          marginTop:20,
        ,


);

       AppRegistry.registerComponent('AsyncStorageEample', () =>     AsyncStorageEample);

【参考方案1】：

AsyncStorage 是一种异步操作。所以应该用 'async - await' 来完成。

试试下面的代码

async onRetreive() 
    const user = await AsyncStorage.getItem('name');
    Alert.alert('Name:'+user);

【讨论】：

@sowmya 即使在documentation 'async-await' 中使用。我不知道你是怎么错过的。

很好。编码愉快。

把这个包在 try and catch 中，因为它可以抛出。