Question

我已经设置了提供者，以使用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 };

父亲节快乐，谢谢你！

Answer 1

我认为在这种情况下不需要next/dynamic。 ES2020 dynamic import()用于动态导入JavaScript模块（包括React Components）。在这里，您什么都不导入。

此外，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>
  );
}

使用useState和useContext React Hooks保持localStorage的持久性

1 个答案: