使用相同屬性在異步存儲中多次保存值

Question

我是新來的本地人。
通過將InputText的2個值放在“ text1”和“ text2”中，我能夠在異步存儲中保存2個TextInputs值。 現在，我正在嘗試如果我按下（下一步）按鈕，然后再次出現這2個InputText再次獲得2個值並將這2個值再次保存在同一個text1和text2屬性內的asyn存儲中，而不擦除或重置先前保存的2個值。

//AddScreen.js

import React, { Component } from 'react';
import { AppRegistry, AsyncStorage, View, Text, Button, TextInput, StyleSheet, Image, TouchableHighlight, Linking } from 'react-native';
import styles from '../components/styles';
import { createStackNavigator } from 'react-navigation';
import History from '../components/History';

export default class AddScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myKey: '',
            costKey: '',
            text1: '',
            text2: '',
        }
    }
    async getKey() {
        try {
            const value = await AsyncStorage.getItem('@MySuperStore:key');
            const key = await AsyncStorage.getItem('@MySuperStore:key');
            const key1 = await AsyncStorage.getItem('@MySuperStore:key1');
            const key2 = await AsyncStorage.getItem('@MySuperStore:key2');
            this.setState({
                myKey: key,
                costKey: key2
            });
        } catch (error) {
            console.log("Error retrieving data" + error);
        }
    }

    async saveKey(text1, text2) {
        key = text1 + text2;
        try {
            await AsyncStorage.setItem('@MySuperStore:key', key);
            await AsyncStorage.setItem('@MySuperStore:key1', text1);
            await AsyncStorage.setItem('@MySuperStore:key2', text2);
        } catch (error) {
            console.log("Error saving data" + error);
        }
    }

    async resetKey() {
        try {
            await AsyncStorage.removeItem('@MySuperStore:key');
            await AsyncStorage.removeItem('@MySuperStore:key2');
            const value = await AsyncStorage.getItem('@MySuperStore:key');
            const large = await AsyncStorage.getItem('@MySuperStore:key2')
            this.setState({
                myKey: value,
                costKey: large
            });
        } catch (error) {
            console.log("Error resetting data" + error);
        }
    }

    componentDidMount() {
        //this.getKey();
    }

    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.MainContainer}>

                <TextInput
                    style={styles.formInput}
                    placeholder="Enter key you want to save!"
                    value={this.state.myKey}
                    onChangeText={(value) => this.setState({ text1: value })}
                />
                <TextInput
                    style={styles.formInput}
                    placeholder="Enter key you want to save!"
                    value={this.state.costKey}
                    onChangeText={(value) => this.setState({ text2: value })} />

                <Button
                    onPress={() => this.saveKey(this.state.text1, this.state.text2)}
                    title="Save key"
                />
                <Button
                    style={styles.formButton}
                    onPress={this.getKey.bind(this)}
                    title="Get Key"
                    color="#2196f3"
                    accessibilityLabel="Get Key"
                />
                <Button
                    style={styles.formButton}
                    onPress={this.resetKey.bind(this)}
                    title="Reset"
                    color="#f44336"
                    accessibilityLabel="Reset"
                />

                <Text style={styles.instructions}>
                    Stored key is = {this.state.myKey}
                </Text>
                <Text style={styles.instructions}>
                    Stored key is = {this.state.costKey}
                </Text>
                <Button
                    onPress={() => navigate('AddScreen', {
                        })}
                    title="Next"
                />
            </View>
        )
    }
}

我的意思是認為我的（AddScreen.js）組件是一個小盒子，它在'text1'和'text2'中包含InputText的2個值，並通過標記該小盒子1將該小盒子放入更大的容器異步存儲中。我按下（Next）按鈕，然后再次出現一個新的小盒子（AddScreen.js），然后再次將2個InputText值放入相同的'text1'和'text2'屬性中，並將該小盒子再次放入較大的異步存儲容器中，通過在那個小盒子2上貼上標簽，依次按下（Next）多次重復選擇盒子3，盒子4。

請以我的示例為例，提出如何處理異步存儲的方法。

Answer 1

要求是：

在AsyncStorage中保存多個（n）值，該值需要按順序獲取。

最簡單的方法是使用數組。 您可以最初使用初始值創建一個數組。 然后JSON.stringify將其保存到AsyncStorage 。 然后，在提交下一個表單時，從AsyncStorage獲取保存的數組，解析該數組，附加新值，然后將其放回AsyncStorage。

保存數組：

const someArray = [1,2,3,4];
return AsyncStorage.setItem('somekey', JSON.stringify(someArray))
      .then(json => console.log('success!'))
      .catch(error => console.log('error!'));

要從AsyncStorage讀取陣列：

return AsyncStorage.getItem('somekey')
  .then(req => JSON.parse(req))
  .then(json => console.log(json))
  .catch(error => console.log('error!'));

Answer 2

您不能在AsyncStorage中存儲具有相同鍵名的多個數據。 要實現此功能，請將數據存儲在AsyncStorage中作為對象的字符串數組。

let inputKeyArray = []
let dataToBeStored = {
     '@MySuperStore:key': key,
     '@MySuperStore:key': text1,
     '@MySuperStore:key': text2      
}

AsyncStorage.getItem('inputKeyArray', (err, resp) => {       // Getting data from AsyncStorage
    let responseData = JSON.parse(resp)

        inputKeyArray = responseData || []
        inputKeyArray.push(dataToBeStored)
        AsyncStorage.setItem('inputKeyArray', JSON.stringify(inputKeyArray))  // Setting Your Data in AsyncStorage
            .then(res => console.log('success!'))
            .catch(error => console.log('error!'))

})