Question

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

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

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

有解决这个问题的主意吗？

Answer 1

如果刷新页面，则将处于本地存储状态的状态肯定会丢失

Answer 2

在页面之间转换期间设置状态。换句话说，它是从一页传递到另一页的。刷新目标页面时，location.state将为null，因为状态应来自上一页。

Answer 3

我遇到了同样的问题。就我而言，这是因为每次访问该链接时，我都会打开一个新选项卡。解决此问题的一种可能方法是使用window.history.state（根据已解决的问题：https://github.com/gatsbyjs/gatsby/issues/9091）。

Answer 4

我遇到了同样的问题，最终我使用了一个将状态持久保存在本地存储中的钩子。我不知道您是否正在使用钩子，但是假设您使用钩子就可以解决您的问题：

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同意横幅，因此它有很多用途。编码愉快，希望可以解决您的问题！

当我刷新页面时，Gatsby链接状态丢失

4 个答案: