javascript - localStorage 在刷新时使用初始状态值进行更新
问题描述
我正在尝试使用 localStorage 在刷新时保持组件的状态。该组件在页面的初始渲染时工作正常,但该组件失败并显示消息:TypeError:items.map is not a function
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 设置了初始值 [] 而不是新更新的值。不知道我哪里出错了。请帮忙
解决方案
使用 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) => {
.....
.....
)
}
推荐阅读
- jquery - 基于下拉选择 MVC 4 显示值
- nginx - 如何在 Vue.js 应用程序中显示 Kubernetes Pod 名称
- python - 通过转换 unicode 字符 u'\u20ac' 使用 python 模块打印欧元符号€
- r - 基于模型的优化(在 mlrMBO 中)需要多少次迭代?
- reactjs - Airbnb JS StyleGuide 和 history.push 不结合
- awk - AWK - 在 AND 语句中的 OR
- google-chrome - Chrome 扩展程序卸载 URL 并非在所有情况下都有效
- ios - Swift 4.2 解包问题 (??)
- sql-server - 在 SQL Server 中,获取表的列名而不使用系统表
- admin-on-rest - 我在 AUTH_CHECK 中被拒绝的承诺什么也没做