使 localStorage 在 React 中的页面刷新时保留其内容

Question

我正在尝试向我的应用程序添加一个收藏页面，该页面基本上会列出一些以前插入的数据。我希望从本地存储获取数据。它基本上有效，但是当我导航到另一个页面并返回时，localStorage 再次为空。我希望本地存储中的数据在刷新应用程序时保留。

数据从此处设置为本地存储

import React, { useState, createContext, useEffect } from 'react'
export const CombinationContext = createContext();
const CombinationContextProvider = (props) => {
let [combination, setCombination] = useState({
baseLayer: '',
condiment: '',
mixing: '',
seasoning: '',
shell: ''
});
const saveCombination = (baseLayer, condiment, mixing, seasoning, shell) => {
setCombination(combination = { baseLayer: baseLayer, condiment: condiment, mixing: mixing, seasoning: seasoning, shell: shell });
}
let [combinationArray, setCombinationArray] = useState([]);
useEffect(() => {
combinationArray.push(combination);
localStorage.setItem('combinations', JSON.stringify(combinationArray));
}, [combination]);
return (
<CombinationContext.Provider value={{combination, saveCombination}}>
{ props.children }
</CombinationContext.Provider>
);
}
export default CombinationContextProvider;

并从这里获取

import React, { useContext, useState } from 'react'
import { NavContext } from '../contexts/NavContext';
const Favorites = () => {
let { toggleNav } = useContext(NavContext);
let [favorites, setFavorites] = useState(localStorage.getItem('combinations'));
console.log(favorites);
return (
<div className="favorites" >
<img className="menu" src={require("../img/tacomenu.png")} onClick={toggleNav} />
<div className="favorites-title">YOUR FAVORITES</div>
<div>{ favorites }</div>
</div>
);
}
export default Favorites;

Answer 1

您的代码存在一些问题。 此代码块：

useEffect(() => {
combinationArray.push(combination);
localStorage.setItem('combinations', JSON.stringify(combinationArray));
}, [combination]);

将在依赖项数组[combination]更改时运行，其中包括第一次呈现。 这样做的问题是combination第一次渲染时所有空值，因此它会覆盖您的本地存储项。

此外，combinationArray.push(combination);不会导致重新渲染，因为你只是在更改一个 javascript 值，所以 react 不知道状态发生了变化。 你应该使用 react 给你的更新程序函数，像这样：

setCombinationArray(prevArr => [...prevArr, combination])

应推送到combinationArray并将结果设置为新的状态值，并注意不要覆盖旧的本地存储值