getitem在localStorage中返回null

Question

我试图在localStorage中设置和获取项目。我有功能状态，所以我试着获取并设置item作为状态的键，Setitem正在工作，但当我刷新我的网站localstorage返回null。

我的代码是这样的:

const [chart, setChart] = useState([
empty,
empty,
empty,
empty,
empty,
empty,
empty,
empty,
]);
const charts = index => chart[index].key;
const chartStorageKey = [
charts(0),
charts(1),
charts(2),
charts(3),
charts(4),
charts(5),
charts(6),
charts(7),
];

useEffect(() => {
const persistChart = localStorage.getItem("chart");
JSON.parse(persistChart);
});

useEffect(() => {
localStorage.setItem("chart", JSON.stringify(chartStorageKey), [
chartStorageKey,
]);
});

Answer 1

由于empty是组件，您需要在此数组中添加对象，并使用key和value empty组件。

const [chart, setChart] = useState([
{key: empty},
{key: empty},
{key: empty},
{key: empty},
{key: empty},
{key: empty},
{key: empty},
{key: empty},
]);

就像这里一样，你要抛出数组并获得键，在这种情况下是空的

const charts = index => chart[index].key;

这里是游乐场的链接

Answer 2

useEffect序列错误。

第二个useEffect应该在第一个。

Answer 3

UseEffect将在每次渲染中被调用，所以添加第二个参数，这样它将只在组件被加载时被调用

const [chart, setChart] = useState([
empty,
empty,
empty,
empty,
empty,
empty,
empty,
empty,
]);
const charts = index => chart[index].key;
const chartStorageKey = [
charts(0),
charts(1),
charts(2),
charts(3),
charts(4),
charts(5),
charts(6),
charts(7),
];
useEffect(() => {
localStorage.setItem("chart", JSON.stringify(chartStorageKey));
},[]);

useEffect(() => {
const persistChart = localStorage.getItem("chart");
console.log(persistChart)
}, []);

如果你想在每次chart状态变化时更改本地存储，那么只需将chart传递给useEffect的依赖数组

useEffect(() => {
localStorage.setItem("chart", JSON.stringify(chartStorageKey));
},[chart]);

useEffect(() => {
const persistChart = localStorage.getItem("chart");
console.log(persistChart)
}, [chart]);

Answer 4

传递一个空数组作为第一个useEffect的第二个参数

useEffect(() => {
const persistChart = localStorage.getItem("chart");
JSON.parse(persistChart);
}, []);

在第二个useEffect中，[chartStorageKey]应该是useEffect的参数，而不是setItem的参数

useEffect(() => {
localStorage.setItem("chart", JSON.stringify(chartStorageKey));
}, [chartStorageKey]);