Блог

У меня есть кнопка в моем родном приложении react, которая переключает значение состояния с true на false:

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

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

Эту кнопку можно использовать на нескольких картах в приложении, поэтому каждая карта всегда будет иметь свое собственное состояние isLearned , либо истинное, либо ложное. Что мне нужно сделать, так это сохранить значение состояния каждой отдельной карты после обновления страницы. Я пробовал использовать AsyncStorage с помощью крючка useEffect:

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

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

Но что это делает, так это изменяет значение состояния всех карт сразу. Я также попытался вставить функцию получения в код для моей кнопки:

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

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

Но это просто записывает каждую запись как true .

Поскольку каждая карта будет иметь разное значение состояния, есть ли способ сохранить каждую из них по отдельности?

Асинхронное хранилище является глобальным, поэтому оно обновляет все карты, потому что все карты ссылаются на одну пару валиев с выученным ключом в асинхронном хранилище. Добавление уникального кода в каждое асинхронное хранилище при сохранении состояния может решить проблему.

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

префикс uniqueCode prop к имени ключа при сохранении данных в асинхронном хранилище, а также при чтении из асинхронного хранилища.

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

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