时间戳

首页 > 解决方案 > 刷新页面时 Gatsby 链接状态丢失

reactjs - 刷新页面时 Gatsby 链接状态丢失

问题描述

我正在使用Gatsby 提供state的组件中的道具发送状态数据。Link

<Link
  to={`/photos`}
  state={{ photoData }}
>
  View Photo
</Link>

当我单击View Photo链接时，它会转到photos页面，我可以photoData从props.location.state. 问题是当我刷新页面时，它photoData被清除了。development这在该模式下效果很好，因此photoData即使在我刷新photos页面后仍然存在。production但它在模式下不起作用。我正在考虑将数据存储到 redux 存储，但这太过分了。

有什么想法可以解决这个问题吗？

标签： reactjsgatsby

解决方案

我遇到了同样的问题，最后我使用了一个将状态保存在本地存储中的钩子。我不知道你是否使用钩子，但假设你是这应该解决你的问题：

import { useEffect, useState } from 'react';

export const usePersistState = (key: string | any, defaultValue: string | boolean | any) => {
  const [value, setValue] = useState(() => {
    if (typeof window !== 'undefined') {
      const persistedState = window.localStorage.getItem(key);
      return persistedState !== null ? JSON.parse(persistedState) : defaultValue;
    }
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];
};

这会根据 localStorage 项目设置您的状态，因此它应该有一个布尔值。然后将其导入到您的组件中，并像使用useState.

import { usePersistState } from 'hooks/use-persist-state';

const [state, setState] = usePersistState('localStorageKey', localStorageValue);

我用它来保存我从 API 调用的数据，并显示/隐藏 cookie 同意横幅，所以它有很多用途。快乐的编码，希望这能解决你的问题！

推荐阅读