我相信next/dynamic
在这种情况下不需要。 ES2020dynamic import()
用于动态导入 JavaScript 模块(包括 React 组件)。在这里你没有导入任何东西。
此外,键和值localStorage
始终采用字符串格式。这就是为什么你可以跳过null
value(或者它将被转换为字符串“null”)。我建议您使用以下方法将整个用户状态存储为一个对象JSON.stringify
.
So the setLocalStorage()
and getLocalStorage()
将:
function setLocalStorage(key, value) {
try {
window.localStorage.setItem(key, JSON.stringify(value));
} catch (e) {
// catch possible errors:
// https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
}
}
function getLocalStorage(key, initialValue) {
try {
const value = window.localStorage.getItem(key);
return value ? JSON.parse(value) : initialValue;
} catch (e) {
// if error, return initial value
return initialValue;
}
}
然后,您可以在UserProvider
如下:
function UserProvider({ children }) {
const [user, setUser] = useState(() => getLocalStorage("user", initialState));
useEffect(() => {
setLocalStorage("user", user);
}, [user]);
return (
<UserContext.Provider
value={{
userId: user.id,
userAvatar: user.avatar,
userImages: user.images,
setUserId: (id) => setUser({ ...user, id }),
setUserAvatar: (avatar) => setUser({ ...user, avatar }),
setUserImages: (images) => setUser({ ...user, images }),
}}
>
{children}
</UserContext.Provider>
);
}