Question

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

这是我的代码

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

Settlement.js

<form enctype="multipart/form-data" onSubmit={this.handleSubmit.bind(this)}>
    <input className="form-control"
        type="file"
        ref="uploader"
        name="image"
        onChange={this.uploadFiles.bind(this)}/>
</form>

Answer 1

您需要将storedValue存储到onLoad内的状态，例如

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

希望这会有所帮助！

Answer 2

更改此行 “等待AsyncStorage.setItem（key，text）;”to “等待AsyncStorage.setItem（'key'，text）;” 密钥的名称应该是字符串，因此它应该是单引号。

和改变这一行 “const storedValue = await AsyncStorage.getItem（key）;”to “const storedValue = await AsyncStorage.getItem（'key'）;” 调用的set键的名称应该是string，因此它应该是单引号。

您设置的按键是不同的，而您获得的按键是不同的

React Native - 使用AsyncStorage将数据存储在另一个屏幕中

2 个答案: