gpt4 book ai didi

reactjs - 使用 useState 和 useContext React Hooks 持久化 localStorage

转载 作者:行者123 更新时间:2023-12-04 15:59:05 53 4
gpt4 key购买 nike

我已经设置了一个提供者来使用 useContext 为用户共享一些状态.因此,我试图利用本地存储为用户图像(头像等)保存一些状态。
首先,我试图为用户保留头像,本质上是从 express 保存他们的 ID,然后在我调用 Cloudinary(一种图像托管服务)时使用它。
我想我很接近(因为我获得了头像的默认图像占位符),但我无法设置本地存储。

import React, { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';

var initialState = {
userId: null,
avatar: '/static/uploads/profile-avatars/placeholder.jpg'
};

var UserContext = React.createContext();

function getLocalStorage() {
return Object.keys(initialState).forEach(item => {
dynamic(
() =>
Object.keys(initialState).forEach(
val => (initialState[window.localStorage.getItem(item)] = val)
),
{
ssr: false
}
);
});
}

function setLocalStorage() {
Object.keys(initialState).forEach(item => {
console.log('item setLocalStorage', item);
dynamic(
() =>
window.localStorage.setItem(
item,
Object.values(initialState).forEach(item => item)
),
{
ssr: false
}
);
});
}

function UserProvider({ children }) {
var [userImages, setUserImages] = useState(() => getLocalStorage() || initialState);

var [userId, setUserId] = useState(userImages.userId);

useEffect(() => {
setLocalStorage();
}, [userId]);

return (
<UserContext.Provider
value={{
userImages,
setUserImages,
userId,
setUserId
}}
>
{children}
</UserContext.Provider>
);
}

export default UserContext;

export { UserProvider };
提前谢谢你,父亲节快乐!

最佳答案

我相信next/dynamic在这种情况下不需要。 ES2020 dynamic import()用于动态导入 JavaScript 模块(包括 React 组件)。在这里你没有导入任何东西。
此外,localStorage 中的键和值总是字符串格式。这就是为什么您可以跳过 null值(或者它将被转换为字符串“null”)。我建议您使用 JSON.stringify 将整个用户状态存储为一个对象.
所以setLocalStorage()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>
);
}

关于reactjs - 使用 useState 和 useContext React Hooks 持久化 localStorage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62504525/

53 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com