React Native - использование AsyncStorage для хранения данных на другом экране

Question

Я пытаюсь сохранить некоторые данные в своем приложении с помощью AsyncStorage, но дело в том, что всякий раз, когда я отправляю данные и затем перехожу ко второму экрану (где должны храниться данные), он пуст.

кнопка навигации

Экран SendOrder

Вот мой код

SendOrder.js

import Settlement from './Settlement';

export default class SendOrder extends React.Component {

state = {
    text: '',
    storedValue: '',
}

onSave = async () => {
    const { text } = this.state

    try {
        await AsyncStorage.setItem(key, text);
        Alert.alert('Saved', 'Successful');
    } catch (error) {
        Alert.alert('Error', 'There was an error.')
    }
}

onChange = (text) => {
    this.setState({ text });
}

  render() {
    return (
      <View>
        <View>
            <Text>- Noter -</Text>
        </View>
        <View>
            <TextInput
                onChangeText = {this.onChange}
                value = { this.state.text }>
            </TextInput>
        </View>
        <TouchableOpacity onPress = { this.onSave }>
            <Text style = { styles.addButtonText }> + </Text>
        </TouchableOpacity>    
      </View>
    );
  }
}

Settlement.js

import SendOrder from './SendOrder';
const key = '@MyApp:key';

export default class Settlement extends React.Component {

    state = {
        text: '',
        storedValue: '',
    }

    componentWillMount() {
        this.onLoad();
    }

    onLoad = async () => {
        try {
            const storedValue = await AsyncStorage.getItem(key);
        } catch (error) {
            Alert.alert('Error', 'There was an error.')
        }
    }

  render() {
      const { storedValue, text } = this.state;
    return (
        <View>
            <Text>{storedValue}</Text>
            <View>
                <TouchableOpacity onPress = {this.onLoad}>
                    <Text>Load Data</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
  }
}

Answer 1

Измените эту строку "await AsyncStorage.setItem (key, text);" на "await AsyncStorage.setItem ('key', text);" Имя ключа должно быть строкой, поэтому оно должно быть в одинарных кавычках.

и изменить эту строку "const storeValue = await AsyncStorage.getItem (key);" to "const storeValue = await AsyncStorage.getItem ('key');" Имя вызываемого набора ключей должно быть строкойтак что это должно быть в одинарных кавычках.

Ключи, которые вы устанавливаете, отличаются, а ключ, который вы получаете, отличается

Answer 2

Вам нужно хранить storedValue в состоянии внутри onLoad, например

onLoad = async () => {
    try {
        const storedValue = await AsyncStorage.getItem(key);
        this.setState({ storedValue });
    } catch (error) {
        Alert.alert('Error', 'There was an error.')
    }
}

Надеюсь, это поможет!