复选框状态保存在异步存储，但复选框未保存

Question

我一直在尝试为AsyncStorage做这个小演示，我可以成功保存一个配置文件(用户名和密码)，但复选框是问题，值被成功保存为true但是复选框返回到false每次刷新。

这是App.js:

/* eslint-disable no-undef */
/* eslint-disable react-native/no-inline-styles */
// In App.js in a new project
import React, { useState, useEffect }from 'react';
//import type { Node } from 'react';
import {
TextInput,
Button,
View
} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import AsyncStorage from '@react-native-async-storage/async-storage';
import BouncyCheckbox from "react-native-bouncy-checkbox";

class App extends React.Component {
static navigationOptions = { headerShown: false };
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
checked: false
}
this.getData();
}
componentDidMount () {
console.log('success')
}

onSubmit = async () => {
try {
await AsyncStorage.setItem('userprofile', JSON.stringify({
username: this.state.username,
password: this.state.password
}))
console.log('Username saved =====> ', this.state.username)
console.log('Password saved =====> ', this.state.password)
console.log('State Checkbox saved =====> ', this.state.checked)
} catch (e) {
console.log(e)
}
}
storeData = () => {
this.setState(prevState => ({ checked: !prevState.checked }))
if (this.state.checked == true) {
AsyncStorage.setItem("@storage_Key", JSON.stringify(this.state.checked));
console.log('State Checkbox saved =====> ', this.state.checked)
}
}
getData = async () => {
try {
//Asyn state on full profile
const userprofile = await AsyncStorage.getItem('userprofile')
const _userprofile = JSON.parse(userprofile)
if (_userprofile !== null) {
this.setState({ ..._userprofile })
}
AsyncStorage.getItem("@storage_Key").then((value) => {
if (value != null) {
this.setState({
checked: true
})
console.log('State Checkbox recovered 3: ', this.state.checked)
}
})
console.log('State Checkbox recovered 2: ', this.state.checked)

console.log('Username recovered: ', this.state.username)
console.log('Password recovered: ', this.state.password)
console.log('State Checkbox recovered: ', this.state.checked)
} catch (e) { console.log(e) }
}
clearData = async () => {
try {
await AsyncStorage.clear();
console.log('Credenciales eliminadas')
} catch (e) { console.log(e) }
}


render() {
return (
<View style={{ flex: 1, backgroundColor: '#FFFF', alignItems: 'center' }}>
<View style={{ width: '100%', height: 100 }}></View>
<KeyboardAwareScrollView>
<View style={{ width: '100%', height: 100 }}>
<View style={{ width: '100%', marginVertical: 10 }}>
<TextInput
placeholder="E-Mail..."
value={this.state.username}
onChangeText={val => this.setState({ username: val })}
/>
</View>
<View style={{ width: '100%', borderColor: '#808080', borderStyle: 'solid' }}>
<TextInput
placeholder="Password..."
value={this.state.password}
onChangeText={val => this.setState({ password: val })}
/>
</View>
<View style={{ width: '100%', height: 10 }}></View>
<BouncyCheckbox
fillColor="red"
unfillColor="#FFFFFF"
text="Recuérdame"
isChecked={this.state.checked}
onPress={() => this.storeData}
/>
<View style={{ width: '100%', height: 10 }}></View>
<Button title="Submit Login" onPress={this.onSubmit} />
<Button title="Clean" onPress={this.clearData} />
</View>
</KeyboardAwareScrollView>
</View>
);
}
}
export default App;

在这个演示的目的是能够记住凭证，如用户名和密码，当复选框被切换，并清除它们时，解开它。如果您能提供任何帮助或更正，我们将不胜感激。

Answer 1

状态更新可能是异步的
https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

你不能这样做

。设置状态(prevState =比;{checked: !
if (this.state.)Checked == true) {

或

。setState({checked: true})
console.log('State Checkbox recovered 3: '， this.state.checked)

正确的方法是:

this.setState({
checked: true
},() => { console.log('new state', this.state); })