使用 AsyncStorage 存储多个表单值

Question

我需要使用 AsyncStorage 存储来自屏幕的两个值，并以键值的格式存储它 pairs.I 希望将此数据本地存储在手机中，并在需要时从中检索。我曾尝试检索单个数据，但无法处理多个数据。

import React, { Component } from 'react';
import { StyleSheet, AsyncStorage, TextInput, View, Alert, Button, Text, TouchableOpacity } from 'react-native';

class FormData extends Component {
 constructor(props){
   super(props)
   this.state = {
    // myKey: '',
      key: '',
      text1: '',
      text2: '',
      getValue: '',
      infoValue:''
   };
 }
 savefunction = () => {

   let storedObject = {};
       storedObject.textval1 = text1;
       storedObject.textval2 = text2;
       try {
           AsyncStorage.setItem('allTextValue', JSON.stringify(storedObject));
       } catch (error) {
       }
 }
 getfunction = () => {
   try {
               AsyncStorage.getItem('allTextValue').then((infoValue) => {
               let resObject = JSON.parse(infoValue);
              let textval1 = resObject.text1
              let textval2 = resObject.text2
             }).done();
            } catch (error) {
            }
 }
render (){
   return(
     <View style={styles.MainContainer}>
        <Text style= {styles.TextComponentStyle}>User Form</Text>

        <TextInput
          placeholder="Enter User Email"
          onChangeText={(value) => this.setState({ text1: value})}
          underlineColorAndroid='transparent'
          style={styles.TextInputStyleClass}
        />

        <TextInput
          placeholder="Enter User Password"
           onChangeText={(value) => this.setState({ text2: value})}
          underlineColorAndroid='transparent'
          style={styles.TextInputStyleClass}
        />

        <Button    onPress={this.savefunction}
              title="Save key" color="#2196F3" />

        <Button  onPress={this.getfunction}
                    title="Get key" color="#2196F3" />
        <Text style={styles.text}> {this.state.getValue} </Text>
</View>
    );
  }
}

export default FormData;
const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',
flex:1,
margin: 10,
},

TextInputStyleClass: {

textAlign: 'center',
marginBottom: 7,
height: 40,
borderWidth: 1,
// Set border Hex Color Code Here.
 borderColor: '#2196F3',

 // Set border Radius.
 borderRadius: 5 ,

},
text: {
  fontSize: 20,
  textAlign: 'center',
},

 TextComponentStyle: {
   fontSize: 20,
  color: "#000",
  textAlign: 'center',
  marginBottom: 15
 }
});

我希望使用键值对将多个数据存储在地图中

Answer 1

我看到的唯一问题是在获取项目时从对象中获取值的地方：

let resObject = JSON.parse(infoValue);
let textval1 = resObject.textval1
let textval2 = resObject.textval1

你也可以改成

let resObject = JSON.parse(infoValue);
let {textval1, textval2} = resObject

Answer 2

您没有正确保存价格。您声明了一个状态值，并将一个值放入同名变量中。需要修改代码。

 savefunction = () => {

   let storedObject = {};
       storedObject.textval1 = this.state.text1;
       storedObject.textval2 = this.state.text2;
       try {
           AsyncStorage.setItem('allTextValue', JSON.stringify(storedObject));
       } catch (error) {
       }
 }
...
 getfunction = async () => {
   try {
             const infoValue = await AsyncStorage.getItem('allTextValue')
               let resObject = JSON.parse(infoValue);
              let textval1 = resObject.textval1
              let textval2 = resObject.textval2
              console.log(textval1);
              console.log(textval2);
            } catch (error) {
               console.log(error);
            }
 }

使用 AsyncStorage 存储多个表单值

To store multiple values of form using AsyncStorage

react-native

asyncstorage