javascript - 从具有 2 个属性的异步存储中获取密钥

Question

我是新来的反应本地人。在 TextInput 中调用时，我试图获取具有 2 个属性 myKey 和 'costKey' 的 'Key' 和 'Key2'。2 个文本输入值保存在异步存储键中。现在我试图用 2 个不同的属性来调用它们，它们是“myKey”和“costKey”。请建议，如何在调用时获取两个具有 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');
                const value = await AsyncStorage.getItem('@MySuperStore:key');
                this.setState({ myKey: value }, { costKey: value });
            } catch (error) {
                console.log("Error resetting data" + error);
            }
        }

    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>
                </View>
            )
        }
    }

请以我为例，建议如何分别调用两个不同的属性。

标签： javascriptreactjsreact-native

Answer 1

您的要求不是很清楚，但在一个简短的分析中，我只是注意到您使用setState()不正确（在getKey()和中resetKey()）。您将状态声明为带有一些键的对象，因此您应该对其进行修改，并将其传递给具有相同结构的新对象：

this.setState({
  ...this.state,
  myKey: key,
  costKey: key2
});