Передача данных ввода текста в формате JSON через AsyncStorage в React Native

Question

Я создаю форму входа в систему на собственном языке и хочу сохранить свои текстовые данные через AsyncStorage.

После некоторых исследований я получил помощь по ссылке на Youtube: https://www.youtube.com/watch?v=sUlKjXi-zxk.Я просто хотел сохранить все пользовательские вводы в формате JSON всякий раз, когда кто-то использует приложение.

Сейчас я могу сохранить один ввод в моем приложении, но мне нужно хранить больше текстовых вводов в локальном хранилище.,Вот мой код для большей справки.

export default class Login extends React.Component {
constructor(props){
   super(props)
   this.state = {
      serverName: '',
      user: ''
   }
}

saveData = () =>{
   const {serverName,user} = this.state;
   let myArray = {
      serverName: serverName,
      user: user
   }
   AsyncStorage.setItem('myArray',JSON.stringify(myArray));

   alert(serverName + ' ' + user + ' your data has been saved ');

}

showData = async() =>{
   let myArray = await AsyncStorage.getItem('myArray');
   let d = JSON.parse(myArray);
   alert(d.serverName + ' ' + d.user);
}
 render() {
      return (
        <ScrollView>
         <View style = {styles.container}>

          <ListItem noBorder>  
            <Input  style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = {string.serverName}
               placeholderTextColor = {color.drakGray}
               autoCapitalize = "none"
               onChangeText = {(text) => this.setState({serverName: text})}/>
          </ListItem>


          <ListItem noBorder>
            <Input style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = {string.userName}
               placeholderTextColor = {color.drakGray}
               autoCapitalize = "none"
               onChangeText = {(text) => this.setState({user: text})}/>
          </ListItem>


          <View style={{ justifyContent: 'center',  alignItems: 'center'}}>
            <TouchableOpacity
               style = {styles.submitButton}
                onPress={this.saveData}> 
               <Text style = {styles.submitButtonText}> {string.login} </Text>
            </TouchableOpacity>
          </View>

          <View style={{ justifyContent: 'center',  alignItems: 'center'}}>
            <TouchableOpacity
               style = {styles.submitButton}>
               <Text style = {styles.submitButtonText} onPress={this.showData}>Show</Text>
            </TouchableOpacity>
          </View>

         </View>
        </ScrollView>

      )
   }
} 

может кто-нибудь подсказать в вышеуказанной проблеме.

Заранее спасибо!

Answer 1

Создайте приведенную ниже строку JSON с ключом «input», используя AsyncStorage.setItem () :

{
    "updated_at": 05/12/2018,
    "inputs": [{
        "server": "a_server",
        "user": "a_user"
    }, {
        "server": "b_server",
        "user": "b_user"
    }]
}

И всякий раз, когда поступает новый ввод, создайте новый объект(назовем это « new_input »):

    {
    "updated_at": 06/12/2018,
    "inputs": [{
        "server": "new_input_server",
        "user": "new_input_user"
    }]
}

После этого вы можете вызвать AsyncStorage.mergeItem (), как показано ниже:

   AsyncStorage.mergeItem('inputs', JSON.stringify(new_input), () => {
    AsyncStorage.getItem('inputs', (err, result) => {
      console.log(result);
    });
  });

Ваш новый зарегистрированный JSON-Значение будет выглядеть так

{
    "updated_at": 06/12/2018,
    "inputs": [{
        "server": "a_server",
        "user": "a_user"
    }, {
        "server": "b_server",
        "user": "b_user"
    }, {
        "server": "new_input_server",
        "user": "new_input_user"
    }]
}