盖茨比链接状态在我刷新页面时丢失

Question

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

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

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