reactjs - 反应钩子条件 useState - JSON.parse(...) 为空
问题描述
我正在使用反应钩子,如果存在,我想从客户端的本地存储中检索一些信息。
下面是我定义的应用程序状态:
const [name, setName] = useState(JSON.parse(localStorage.getItem("personalInfo")).name || "");
我希望如果本地存储中没有数据,那么将使用空字符串作为初始状态。
但是,它会产生错误:TypeError: JSON.parse(...) is null
这表明即使本地存储为空,空字符串仍然不能作为初始状态。
它之前按预期工作,但是在我在另一个组件中添加一些复杂的代码之后,它开始产生错误。知道为什么会发生这种情况,以便我知道在哪里调试吗?
解决方案
您可以使用
const localStore = localStorage.getItem("personalInfo")
const [name, setName] = useState(localStore ? JSON.parse(localStore).name : "");
或者您可以安全地解析 JSON
function parseJson(){
try {
return JSON.parse(localStorage.getItem("personalInfo")).name;
} catch(ex){
return "";
}
}
const [name, setName] = useState(parseJson();
推荐阅读
- c# - C# Winforms Devexpress 还有其他按钮工具提示吗?
- javascript - 在 React 中从数组中渲染随机元素
- python - Pandas:在多列上使用字典映射列
- facebook-graph-api - 如何将内容发送到任何用户的 Instagram 个人资料?
- bokeh - 我可以将正/负条形图上的 x 轴枢轴设置为零以外的值吗?
- c# - 是否可以在 LINQ 查询中拆分值并添加 if 条件?
- mysql - MariaDB 在没有外键关系的行上删除 CASCADE
- flutter - Flutter:如何在处理页面时销毁所有 API 调用(Future 和 Stream)
- java - 如何使用 java 验证由 keycloak 签名的 JWT
- python - python比较大文件中的行