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

Question

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

数据从这里设置到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 给你的 updater 函数，像这样：

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

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