Загрузка данных ввода текста в формате 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-String ниже с ключом "входы" с помощью 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"
    }]
}