没有定义localStorage --使用Next.js进行反冲
没有定义localStorage --使用Next.js进行反冲
提问于 2022-03-13 22:18:41
我按照localstorage使用后坐力文件效果，但当我运行应用程序时，浏览器中会出现localStorage is not defined错误。我的第一个假设是，这不是在浏览器和服务器中运行。我不认为是这样的，除非Next.js正在做一些古怪的事情？
这是我的密码：
project/recoil/atom.ts
const localStorageEffect = (key: string) => ({setSelf, onSet}: {setSelf: any, onSet: any}) => {
const savedValue = localStorage.getItem(key)
if (savedValue != null) {
setSelf(JSON.parse(savedValue));
}
onSet((newValue: any, _: null, isReset: any) => {
isReset
? localStorage.removeItem(key)
: localStorage.setItem(key, JSON.stringify(newValue));
});
};
export const userAtom = atom({
key: 'userAtom',
default: {},
effects: [
localStorageEffect('user'),
]
});我试图使用它来持久化登录状态。下面是我使用它的一个例子：
project/pages/login.tsx
const LoginPage = () => {
const [address, setAddress] = useState('');
const setUser = useSetRecoilState(userAtom);
const setIsAuthed = useSetRecoilState(isAuthedAtom);
const submitHandler = async (e: any) => {
try {
const walletInfo = await fetchWallet(address);
setIsAuthed(true);
setUser({...walletInfo, address});
} catch(e: any) {
console.log(e);
}
};
return (
<Login address={address} setAddress={setAddress} submitHandler={submitHandler} />
)这是_app.tsx
import type { AppProps } from 'next/app';
import {
RecoilRoot
} from 'recoil';
import '../styles/globals.css';
function MyApp({ Component, pageProps }: AppProps) {
return (
<RecoilRoot>
<Component {...pageProps} />
</RecoilRoot>
);
}
export default MyApp;但是，在加载主页时，由于错误消息，不会呈现任何内容。我读过这样的解决方案，就是在useEffect钩子中运行它，但是我不能这样做，因为我的效果是用atoms.ts定义的，不能移动。是否有办法强制该文件在浏览器中运行？
回答 2
Stack Overflow用户
发布于 2022-04-08 17:06:56
你可以试试这个。为我工作
import { recoilPersist } from 'recoil-persist'
const localStorage = typeof window !== `undefined` ? window.localStorage : null
const { persistAtom } = recoilPersist({
key: 'recoil-persist',
storage: localStorage
})
export const darkModeState = atom<true | false >({
key: 'darkMode',
default: false,
effects_UNSTABLE: [persistAtom]
})Stack Overflow用户
发布于 2022-10-30 19:19:16
您不需要安装任何其他库，只需替换以下部分：
import { AtomEffect } from 'recoil';
const store = typeof window !== 'undefined' ? window.localStorage : null;
export const localStorageEffect: (key: string) => AtomEffect<any> =
(key) =>
({ setSelf, onSet }) => {
if (store) {
const savedValue = store.getItem(key);
if (savedValue != null) {
setSelf(JSON.parse(savedValue));
}
onSet((newValue, _, isReset) => {
isReset ? store.removeItem(key) : store.setItem(key, JSON.stringify(newValue));
});
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71461311
复制相关文章
相似问题
腾讯云开发者
