如何使用 React Native 持久化单个状态值

编程问答 2022-10-03

问题描述

我的 React Native 应用中有一个按钮可以将状态值从真切换为假：

const [isLearned,setIsLearned] = useState(false);

addRemoveCardToLearned = () => {
  setIsLearned(!isLearned);
};

此按钮可用于应用内的多张卡片，因此每张卡片始终具有自己的 isLearned 状态，可以是 true 也可以是 false。我需要做的是在页面刷新后保留每张卡片的状态值。我尝试将 AsyncStorage 与 useEffect 挂钩：

useEffect(() => {
  AsyncStorage.setItem('isLearned',JSON.stringify(isLearned));
},[isLearned]);

useEffect(() => {
  const storeIsLearned = Boolean(AsyncStorage.getItem('isLearned'));
  setIsLearned(storeIsLearned);
},[]);

但是这样做是一次改变所有卡片状态值。我还尝试在按钮的代码中插入一个 getter 函数：

addRemoveCardToLearned = () => {
  setIsLearned(!isLearned);

  AsyncStorage.getItem('isLearned').then((isLearned) => {
    console.log(isLearned);
  });
};

但这只是将每个条目记录为 true。

由于每张卡都有不同的状态值，有没有办法单独保存每张卡？

解决方法

异步存储是全局的，这就是它更新所有卡片的原因，因为所有卡片都引用异步存储中的单个 isLearned 键值对。 为每个异步存储添加唯一代码，同时保存状态可以解决问题。

<FirstComponent uniqueCode='001' />
<FirstComponent uniqueCode='002' />

在将数据保存到异步存储以及从异步存储读取数据时，将 uniqueCode 属性作为键名作为前缀。

useEffect(() => {   AsyncStorage.setItem(`${props.uniqueCode}_isLearned`,JSON.stringify(isLearned)); },[isLearned]);

useEffect(() => {   const storeIsLearned = 
Boolean(AsyncStorage.getItem(`${props.uniqueCode}_isLearned`));   
setIsLearned(storeIsLearned); },[]);
javascriptpersistreact-nativereactjsreactjs