Javascript React Native-使用异步存储在另一个屏幕中存储数据

我试图使用AsyncStorage在我的应用程序中存储一些数据，但问题是每当我提交数据并导航到第二个屏幕（数据应该存储的地方）时，它都是空的

这是我的密码

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>
    );
  }
}

从“/结算”导入结算；
导出默认类SendOrder扩展React.Component{
状态={
文本：“”，
storedValue:“”，
}
onSave=async（）=>{
const{text}=this.state
试一试{
等待AsyncStorage.setItem（键，文本）；
Alert.Alert（'Saved'，'Successful'）；
}捕获（错误）{
Alert.Alert（'错误'，'发生错误'）
}
}
onChange=（文本）=>{
this.setState（{text}）；
}
render（）{
返回(
-记事本-
+ 
);
}
}

结算.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>
    );
  }
}

从“/SendOrder”导入SendOrder；
const key='@MyApp:key'；
导出默认类结算扩展React.Component{
状态={
文本：“”，
storedValue:“”，
}
组件willmount（）{
这个.onLoad（）；
}
onLoad=async（）=>{
试一试{
const storedValue=await AsyncStorage.getItem（键）；
}捕获（错误）{
Alert.Alert（'错误'，'发生错误'）
}
}
render（）{
const{storedValue，text}=this.state；
返回(
{storedValue}
加载数据
);
}
}

您需要将

storedValue

存储到

onLoad

中的状态，如

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

希望这会有帮助

更改此行 “等待AsyncStorage.setItem（键，文本）；”到 等待AsyncStorage.setItem（'key'，text） 键的名称应为字符串，因此它应位于单引号中

及 换行 “const storedValue=wait AsyncStorage.getItem（key）；”to “const storedValue=await AsyncStorage.getItem（'key'） 被调用的集合键的名称应该是字符串，因此它应该在单引号中

---

您设置的密钥不同，您获得的密钥也不同

警报显示成功，但我的第二个屏幕中仍有数据，先生。先生，在sendOrder.js中，只需添加---**const key='@MyApp:key'；**--是的，先生，但是如果我记得的话——有一个错误或者bug，那么另一个答案会修复它。我想同时检查你的答案，因为它可以同时工作，但我不确定我是否可以这样做。当你在常量中获取设置值时，在你的例子中，它的--“const storedValue=wait AsyncStorage.getItem（key）；”--只需将console.log放入并检查设置值是否正确。注意：这是一个异步过程，因此它可能不会立即反映数据。