localStorage在刷新时使用初始状态值进行更新

Question

我正在尝试使用localStorage在刷新时保持组件的状态。该组件在页面的初始呈现时工作良好，但组件失败，并显示消息：TypeError:items.map不是函数

TestLocalStorage
src/TestLocalStorage.jsx:54

这是代码：

import React, { useEffect, useState } from 'react';
function TestLocalStorage() {
const [items, setItems] = useState([]);
useEffect(() => {
const storedData = localStorage.getItem("items");
if(!storedData) {
Axios.get('/url').then(response => {
const serviceResponse = response.data.hits.map(obj=> ({ ...obj, voteCount: 0 
}));
localStorage.setItem("items", JSON.stringify(serviceResponse));
setItems(serviceResponse);
});
} else {
setItems(storedData);
}
}, []);
useEffect(() => {
localStorage.setItem("items", JSON.stringify(items));
})
function increment(id) {
const elementsIndex = items.findIndex(element => element.objectID === id )
items[elementsIndex].voteCount++;
setItems([...items]);
}
return (
<table cellPadding="0" cellSpacing="0" width="100%" background-color="#f6f6ef">
<tr>
<td>
<table border="0" cellPadding="0" cellSpacing="0" width="100%">
<tr bgcolor="#ff6600" style={{ color:"white", fontWeight: "bold" }}>
<td> Comments </td>
<td> Vote Count</td>
<td> vote</td>
</tr>
{
items.map((item) => {
return (
<tr className="table-rows" key={item.objectID}>
<td>{ item.comments }</td>
<td>{ item.voteCount }</td>
<td>
<div 
style={{ 
width: 0, 
height: 0, 
borderTop: 0, 
borderLeft: "5px solid transparent", 
borderRight: "5px solid transparent", 
borderBottom: "10px solid grey" 
}}
onClick={() => increment(item.objectID)} 
/>
</td>
<td>{ item.title }</td>
</tr>)
})
}
</table>
</td>
</tr>
</table>
);
}
export default TestLocalStorage;

但我注意到，在第二次渲染时，localStorage设置了初始值[]，而不是新更新的值。不确定我哪里错了。请帮助

Answer 1

使用JSON.parse((对从本地存储中提取的字符串进行解析

function TestLocalStorage() {
const [items, setItems] = useState([]);

useEffect(() => {
const storedData = localStorage.getItem("items");
if(!storedData) {
Axios.get('/url').then(response => {
const serviceResponse = response.data.hits.map(obj=> ({ ...obj, voteCount: 0 
}));
localStorage.setItem("items", JSON.stringify(serviceResponse));
setItems(serviceResponse);
});
} else {
setItems(storedData);
}
}, []);
...............
...............
...............
}

修改你的函数如下。此外，在对数组执行映射操作之前，请检查项的值，以防止未捕获的异常

function TestLocalStorage() {
const [items, setItems] = useState([]);

useEffect(() => {
const storedData = JSON.parse(localStorage.getItem("items"));
if(!storedData) {
Axios.get('/url').then(response => {
const serviceResponse = response.data.hits.map(obj=> ({ ...obj, voteCount: 0 
}));
localStorage.setItem("items", JSON.stringify(serviceResponse));
setItems(serviceResponse);
});
} else {
setItems(storedData);
}
}, []);
...............
...............
...............
return (
.....
.....
items && items.map((item) => {
.....
.....
)
}

Answer 2

storedData将是字符串，您需要JSON.parse(storedData)才能使用它并在上执行map