即使在刷新后如何保持 state

Question

我正在尝试将当前的 state 从一页传递到另一页，当我传输它时它可以工作。 但是，新的问题是在新页面上保留当前的 state。 每次我刷新页面时，state 都会消失，并不断收到错误消息“无法读取未定义的属性‘状态’”。 我尝试使用 Hooks 中的 useEffect，但它仍然不起作用。 这是一步一步的代码：

我的产品页面：

<Grid container direction="row" justify="center" alignItems="center">
  {currentSearch.map((productObj) => {
    // console.log(productObj);
    return (
      <ProductResult
        name={productObj.name}
        price={productObj.price}
        style={productObj.style}
        type={productObj.type}
        depth={productObj.depth}
        height={productObj.height}
        width={productObj.width}
      />
    );
  })}
</Grid>

将传递给 ProductResult 组件：

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

然后go到产品说明：

const [loadInfo, setLoadInfoState] = useState('');
useEffect(() => {
  // loadDescrInfo();
  setLoadInfoState(props.location.infoObj.state);
}, []);
console.log(loadInfo);

非常感谢大家的任何建议或帮助。 谢谢

Answer 1

您需要将 state 保存到localStorage或sessionStorage ，当组件安装时，将值从存储传递到 state。 了解 localStorage： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage