React Native - 使用 AsyncStorage 将数据存储在另一个屏幕中
React Native - Using AsyncStorage to store data in another screen
我正在尝试使用 AsyncStorage 在我的应用程序中存储一些数据,但问题是每当我提交数据然后导航到第二个屏幕(应该存储数据的地方)时它是空的。
navigation button
SendOrder Screen
这是我的代码
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>
);
}
}
你需要将storedValue
存储到onLoad
里面的状态,比如
onLoad = async () => {
try {
const storedValue = await AsyncStorage.getItem(key);
this.setState({ storedValue });
} catch (error) {
Alert.alert('Error', 'There was an error.')
}
}
希望对您有所帮助!
更改此行
" await AsyncStorage.setItem(key, text); " 到
" await AsyncStorage.setItem('key', 文本); "
密钥的名称应该是字符串,所以它应该用单引号引起来。
和
改变这一行
“ const storedValue = await AsyncStorage.getItem(key); “到
" const storedValue = await AsyncStorage.getItem('key'); "
调用的设置键的名称应该是字符串,所以它应该在单引号中。
您设置的密钥不同,您获得的密钥也不同
我正在尝试使用 AsyncStorage 在我的应用程序中存储一些数据,但问题是每当我提交数据然后导航到第二个屏幕(应该存储数据的地方)时它是空的。
navigation button
SendOrder Screen
这是我的代码
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>
);
}
}
你需要将storedValue
存储到onLoad
里面的状态,比如
onLoad = async () => {
try {
const storedValue = await AsyncStorage.getItem(key);
this.setState({ storedValue });
} catch (error) {
Alert.alert('Error', 'There was an error.')
}
}
希望对您有所帮助!
更改此行 " await AsyncStorage.setItem(key, text); " 到 " await AsyncStorage.setItem('key', 文本); " 密钥的名称应该是字符串,所以它应该用单引号引起来。
和 改变这一行 “ const storedValue = await AsyncStorage.getItem(key); “到 " const storedValue = await AsyncStorage.getItem('key'); " 调用的设置键的名称应该是字符串,所以它应该在单引号中。
您设置的密钥不同,您获得的密钥也不同