使用AsyncStorage的上下文提供程序(与类组件)

Question

我一直在尝试为我的React Native应用程序开发设置页面，但是我在整合AsyncStorage时遇到了很多麻烦。我知道上下文提供程序是按预期工作的，因为在我的应用程序的所有组件中，传递的变量是我所期望的。我希望能够保存设置的状态，即使刷新应用程序或当我重新打开应用程序，但由于某种原因，应用程序总是重置回存储在我的上下文提供程序的初始状态。下面是我的代码。

SettingsContext.js

import React, { createContext, Component } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
const SettingsContext = createContext();
export class SettingsProvider extends Component {

state = {
notifications: false,
locationServices: false,
private: false,
darkMode: false,
}
// updates the state of notifications
toggleNotifications = async () => {
await AsyncStorage.setItem('@notifications', JSON.stringify(!this.state.notifications));
this.setState({ notifications: !this.state.notifications });
};
// updates the state of locationServices
toggleLocationServices = async () => {
await AsyncStorage.setItem('@locationServices', JSON.stringify(!this.state.locationServices));
this.setState({ locationServices: !this.state.locationServices });
};
// updates the state of private
togglePrivate = async () => {
await AsyncStorage.setItem('@private', JSON.stringify(!this.state.private));
this.setState({ private: !this.state.private });
};
// updates the state of darkMode
toggleDarkMode = async () => {
await AsyncStorage.setItem('@darkMode', JSON.stringify(!this.state.darkMode));
this.setState({ darkMode: !this.state.darkMode });
};
render() {
const { notifications, locationServices, private, darkMode } = this.state;
const { toggleNotifications, toggleLocationServices, togglePrivate, toggleDarkMode } = this;
return (
<SettingsContext.Provider value={{ notifications, locationServices, private, darkMode, toggleNotifications, toggleLocationServices, togglePrivate, toggleDarkMode }}>
{this.props.children}
</SettingsContext.Provider>
)
}
}
export default SettingsContext;

Settings.Js

import React, { Component } from 'react';
import { View, Text, StyleSheet, Switch } from 'react-native';
import SettingsContext from '../utils/SettingsContext';
import AsyncStorage from '@react-native-async-storage/async-storage';
class Settings extends Component {
// stores current state of user's settings
static contextType = SettingsContext;
componentDidMount(){
const notifications = await JSON.parse(await AsyncStorage.getItem('@notifications'));
const locationServices = await JSON.parse(await AsyncStorage.getItem('@locationServices'));
const private = await JSON.parse(await AsyncStorage.getItem('@private'));
const darkMode = await JSON.parse(await AsyncStorage.getItem('@darkMode'));
}
render() {
const { notifications, locationServices, private, darkMode, toggleNotifications, toggleLocationServices, togglePrivate, toggleDarkMode } = this.context;
// stores current settings state
return (
<View style={styles.container}>
<View>
{/* Settings Title */}
<Text style={styles.titleWrapper}> Settings </Text>
</View>
<View style={styles.optionsWrapper}>
{/* News Push Notifications */}
<Text> Push Notifications </Text>
<Switch
onValueChange={() => toggleNotifications()}
value={notifications} /> 
</View>

<View style={styles.optionsWrapper}>
{/* Location Services Title */}
<Text> Location Services </Text>
<Switch
onValueChange={() => toggleLocationServices()}
value={locationServices} />
</View>
<View style={styles.optionsWrapper}>
{/* Privacy */}
<Text> Private </Text>
<Switch
onValueChange={() => togglePrivate()}
value={private} />
</View>
<View style={styles.optionsWrapper}>
{/* Dark Mode */}
<Text> Dark Mode</Text>
<Switch
onValueChange={() => toggleDarkMode()}
value={darkMode} />
</View>
</View>
);
}
}

我诚实地认为，问题是与ComponentDidMount()与我如何使用AsyncStorage.getItem()函数。我试图在SettingsContext文件中创建getter函数，然而，当我这样做并使用箭头函数作为开关的值时，由于某种原因，当我试图切换它时，该值将停留在设置的初始状态上，而不是改变它。

我不太确定如何使用AsyncStorage.getItem()，因为我仍然希望初始设置的状态为false，但是当用户开始切换设置时，那就是我希望它们被更改并存储在本地，以便他们能够访问新更改的设置。如果有人能帮助我了解我在哪里走错了，我需要做的更新，我真的很感激。这是我正在工作的项目所需要的最后一个补充。谢谢!

Answer 1

我相信我已经找到了解决问题的办法。我添加了一个async componentDidMount，并包含了AsyncStorage.getItem()函数来正确设置设置的状态。这样，它在我的应用程序的不同组件之间仍然是全局的，刷新后，它首先检查这个

import React, { createContext, Component } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
const SettingsContext = createContext();
export class SettingsProvider extends Component {

state = {
notifications: false,
locationServices: false,
private: false,
darkMode: false,
}
// updates the state of notifications
toggleNotifications = async () => {
await AsyncStorage.setItem('@notifications', JSON.stringify(!this.state.notifications));
this.setState({ notifications: !this.state.notifications });
};
// updates the state of locationServices
toggleLocationServices = async () => {
await AsyncStorage.setItem('@locationServices', JSON.stringify(!this.state.locationServices));
this.setState({ locationServices: !this.state.locationServices });
};
// updates the state of private
togglePrivate = async () => {
await AsyncStorage.setItem('@private', JSON.stringify(!this.state.private));
this.setState({ private: !this.state.private });
};
// updates the state of darkMode
toggleDarkMode = async () => {
await AsyncStorage.setItem('@darkMode', JSON.stringify(!this.state.darkMode));
this.setState({ darkMode: !this.state.darkMode });
};
// retrieves the state of settings from AsyncStorage on intial app startup
async componentDidMount() {
const notificationsStorage= JSON.parse(await AsyncStorage.getItem('@notifications'));
if(notificationsStorage !== null){
this.setState({notifications: notificationsStorage})
}
const locationServicesStorage= JSON.parse(await AsyncStorage.getItem('@locationServices'));
if(locationServicesStorage !== null){
this.setState({locationServices: locationServicesStorage})
}
const privateStorage= JSON.parse(await AsyncStorage.getItem('@private'));
if(privateStorage!== null){
this.setState({private: privateStorage})
}
}
const darkModeStorage= JSON.parse(await AsyncStorage.getItem('@darkMode'));
if(darkModeStorage !== null){
this.setState({darkMode: darkModeStorage})
}
}
render() {
const { notifications, locationServices, private, darkMode } = this.state;
const { toggleNotifications, toggleLocationServices, togglePrivate, toggleDarkMode } = this;
return (
<SettingsContext.Provider value={{ notifications, locationServices, private, darkMode, toggleNotifications, toggleLocationServices, togglePrivate, toggleDarkMode }}>
{this.props.children}
</SettingsContext.Provider>
)
}
}
export default SettingsContext;