刷新后未定义的localStorage状态值答案

【问题标题】：localStorage state value of undefined after refresh刷新后未定义的localStorage状态值
【发布时间】：2021-03-24 11:40:18
【问题描述】：

我正在尝试将我的状态值传递到另一个页面并将其存储到我的 localStorage。状态已存储，它在我第一次运行我的应用程序时工作。但是，每次刷新页面时，我的 localStorage 值都会显示未定义。据我了解，localStorage 值将一直存在，直到我删除 localStorage 中的值。我试图在我的 Hook useEffect 函数中修改我的 if/else 语句。这是我的代码：

我正在使用此页面传递状态：

<Link to={{
                       pathname: "/product/description",
                       infoObj: {
                           text: "This is information passed on",
                           state: {
                               ...props
                           },
                       }
                   }}>
                        Product Description
                   </Link>

我正在从另一个页面访问状态并将其设置为 localStorageusing：

useEffect(() => {
    const stateInfo = JSON.stringify(props.location.infoObj);
    localStorage.setItem("info", stateInfo);
}, [])

这是我在 localStorage 中访问我的项目的方式：

useEffect(() => {
    const getInfo = JSON.parse(localStorage.getItem("info"));
    if(!localStorage.getItem("info") || getInfo.length === 0){
        try{
            localStorage.setItem("info", JSON.stringify(props.location.infoObj));
        } catch (err){
            console.log(err);
        }
    }
},[])

非常感谢大家的帮助

【问题讨论】：

标签： javascript reactjs components state use-effect

【解决方案1】：

您是对的，localStorage 将在页面刷新或关闭页面/浏览器期间持续存在，但您在页面转换期间通过location.infoObj 传递的其他数据不会。所以最终发生的事情是您的代码用props.location.infoObj 覆盖了localStorage，这将在刷新后未定义。

要修复它，您可以在您的第一个 useEffect 中添加其他条件。

useEffect(() => {
  const stateInfo = JSON.stringify(props.location.infoObj);
  if(stateInfo) {
    localStorage.setItem("info", stateInfo);
  }
}, [])

【讨论】：