Javascript 反应：页面刷新时如何存储数组

我在React中有一个数组，它将使用useffect显示。从上一个组件到下一个组件。现在，我使用useEffect在页面加载上使用useState设置数组。但是，当我刷新页面时，数组未定义，页面变为空白。如何再次获取数组，以便即使我重新加载页面，它也不会抛出错误

我使用了会话存储和本地存储。但对我来说一切都不顺利

这是我到目前为止所做的代码：

const location = useLocation();
useEffect(() => {
        console.log(location.groupsname);
        sessionStorage.setItem('groups', JSON.stringify(location.groupsname));
        const a = JSON.parse(sessionStorage.getItem('groups'));
        console.log(a);
        setimportedgroups(a);
    }, []);

我应该如何解决这个问题？。谢谢。

问题 你很接近。这里的问题是，当组件再次装载时，您正在擦除所有保存的存储值

useEffect(() => {
  // setting storage is synchronous
  sessionStorage.setItem('groups', JSON.stringify(location.groupsname));
  // getting the value just set
  const a = JSON.parse(sessionStorage.getItem('groups'));
  console.log(a);
  setimportedgroups(a);
}, []);

如果在重新加载页面时，location.groupsname未定义，则这是存储的内容，并从存储中加载回来

解决方案 您需要使用一个状态初始值设定项函数和两个useEffect挂钩，一个用于在更新时持久保存到存储本地状态，另一个用于在位置groupsname更新并具有定义的值时更新本地状态

const location = useLocation();

// initialize state from storage on mount
const [importedGroups, setImportedGroups] = useState(() => {
  const groups = sessionStorage.getItem('groups');
  return JSON.parse(groups) ?? {};
});

// persist importedGroups state to storage
useEffect(() => {
  sessionStorage.setItem('groups', JSON.stringify(importedGroups));
}, [importedGroups]);

// update local state when location.groupsname updates
useEffect(() => {
  if (location.groupsname) {
    setImportedGroups(location.groupsname);
  }
}, [location.groupsname]);

问题 你很接近。这里的问题是，当组件再次装载时，您正在擦除所有保存的存储值

useEffect(() => {
  // setting storage is synchronous
  sessionStorage.setItem('groups', JSON.stringify(location.groupsname));
  // getting the value just set
  const a = JSON.parse(sessionStorage.getItem('groups'));
  console.log(a);
  setimportedgroups(a);
}, []);

如果在重新加载页面时，location.groupsname未定义，则这是存储的内容，并从存储中加载回来

解决方案 您需要使用一个状态初始值设定项函数和两个useEffect挂钩，一个用于在更新时持久保存到存储本地状态，另一个用于在位置groupsname更新并具有定义的值时更新本地状态

const location = useLocation();

// initialize state from storage on mount
const [importedGroups, setImportedGroups] = useState(() => {
  const groups = sessionStorage.getItem('groups');
  return JSON.parse(groups) ?? {};
});

// persist importedGroups state to storage
useEffect(() => {
  sessionStorage.setItem('groups', JSON.stringify(importedGroups));
}, [importedGroups]);

// update local state when location.groupsname updates
useEffect(() => {
  if (location.groupsname) {
    setImportedGroups(location.groupsname);
  }
}, [location.groupsname]);

---

它正在工作。但现在的问题是，当我刷新页面时，sessionStorage中的组会像这样清空[]。如何克服这个问题？@progpro我明白了。我意识到您可以简单地读取存储并返回一些初始状态，如果location.groupsname未定义，那么它将更新状态，然后得到持久化，因此您需要在更新状态之前先检查它是否已定义。抱歉造成混淆，请检查更新的答案。它正在工作。但现在的问题是，当我刷新页面时，sessionStorage中的组会像这样清空[]。如何克服这个问题？@progpro我明白了。我意识到您可以简单地读取存储并返回一些初始状态，如果location.groupsname未定义，那么它将更新状态，然后得到持久化，因此您需要在更新状态之前先检查它是否已定义。抱歉造成混淆，请检查更新的答案。