响应本机保存数据异步存储

Question

美好的一天，我正在使用 react native。我想将开关按钮保存为真或假，但它没有。当我打开和关闭应用程序时，不会加载记录的数据。问题出在哪里。它不保存真或假。

class LoginForm extends Component {
toggleRememberMe = value => {
this.setState({ rememberMe: value })
if (value === true) {
this.rememberUser();
} else {
this.forgetUser();
}
}
rememberUser = async () => {
try {
await AsyncStorage.setItem('123123', this.state.remem);
} catch (error) {
// Error saving data
}
};
getRememberedUser = async () => {
try {
const username = await AsyncStorage.getItem('123123');
if (username !== null) {
return username;
}
} catch (error) {
}
};
forgetUser = async () => {
try {
await AsyncStorage.removeItem('123123');
} catch (error) {
}
};
constructor(props) {
super(props)
const remem = this.getRememberedUser();
this.state = {
remem: remem || "", 
rememberMe: remem ? true : false 
}
}
render() {
return (<Switch
value={this.state.rememberMe}
onValueChange={(value) => this.toggleRememberMe(value)}
/><Text>Remember Me</Text>);
}

Answer 1

你必须在componentDidMount中获取RememberedUser()。

现在，您有一个异步函数，您正在尝试在异步上下文之外执行该函数。

像这样：

async componentDidMount() {
const remem = await this.getRememberedUser();
if (remem) {
this.setState({rememberMe: remem})
}
}

Answer 2

您的rememberUser()方法可能在状态更新之前被调用。setState()是一个异步操作。尝试在 asyncStore 设置为rememberMe值后更新它：

toggleRememberMe = value => {
this.setState({ rememberMe: value }, ()=>{
if (value === true) {
this.rememberUser();
} else {
this.forgetUser();
}
})
}

Answer 3

我创建了一个沙盒供您查看。基本上，将AsyncStorage移动到componentDidMount并删除了一些东西(例如使用状态来设置AsyncStorage，这是必需的，因为setState是异步的，并且您的值不可能是预期的)