localStorage未定义-使用Next.js重新编码

Question

根据Recoil文档，我正在使用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中定义的，不能移动。有没有办法强制这个文件在浏览器中运行？

Answer 1

在这里您可以尝试一下。为我工作

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]
})

Answer 2

您不需要安装任何其他库，只需替换此部分：

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));
});
}
};