刷新页面后 localStorage 值设置为未定义答案

【问题标题】：localStorage values are set to undefined after refreshing the page刷新页面后 localStorage 值设置为未定义
【发布时间】：2023-02-22 15:39:16
【问题描述】：

我正在尝试将来自 localStorage 的先前信息整合到 DOM 中，以便用户在同一浏览器中重新访问该页面后可以看到它。由于某种原因，重新加载会将localStorage中的major和declared属性设置为undefined。

谁能告诉我为什么会这样，我该如何解决？这是我的代码：

import React, { useState, useReducer, useEffect, useRef } from "react";
import MajorStatus from "./MajorStatus";
import ClassType from "./ClassType";
import styles from "/styles/ClassSearch.module.css";

function UserInfo() {
  const [currentMajor, setCurrentMajor] = useState();
  const [currentlyDeclared, setIsCurrentlyDeclared] = useState();

  useEffect(() => {
    localStorage.setItem("declared", currentlyDeclared);
    localStorage.setItem("major", currentMajor);
  }, [currentMajor, currentlyDeclared]);

  useEffect(() => {
    let storedDeclarationStatus = localStorage.getItem("declared");
    let storedMajor = localStorage.getItem("major");
    let declarationLabel = storedDeclarationStatus ? "Declared" : "Undeclared";
    declaredRef.current.setValue({
      label: declarationLabel,
      value: storedDeclarationStatus,
    });
    majorRef.current.setValue({
      label: storedMajor,
      value: storedMajor,
    });
  }, []);

  let declaredRef = useRef();
  let majorRef = useRef();

  function onChangeMajorHandler(userInput) {
    setCurrentMajor(userInput.value.major);
    console.log("Current input major: " + userInput.value.major);
  }

  function onChangeDeclaredHandler(userInput) {
    setIsCurrentlyDeclared(userInput.value.declared);
    console.log("Current input declaration: " + userInput.value.declared);
  }

  function onSubmitHandler(event) {
    event.preventDefault();
  }

  return (
    <form className={styles.userInfo} method="post" onSubmit={onSubmitHandler}>
      <MajorStatus
        onChangeMajorHandler={onChangeMajorHandler}
        onChangeDeclaredHandler={onChangeDeclaredHandler}
        majorRef={majorRef}
        declaredRef={declaredRef}
      />
      <ClassType />
      <button
        type="submit"
        name="submitUserInfo"
        className={styles.submitUserInfoButton}
      >
        Search
      </button>
    </form>
  );
}

export default UserInfo;

【问题讨论】：

标签： javascript reactjs react-select

【解决方案1】：

安装组件时，您的第一个 useEffect 在第二个之前运行，它将 localStorage 中的值设置为状态的初始值，undefined，因为您在调用 useState 时没有设置任何值。避免此问题的一种方法是：

useEffect(() => {
  if (currentlyDeclared) {
    localStorage.setItem("declared", currentlyDeclared);
  }
  if (currentMajor) {
    localStorage.setItem("major", currentMajor);
  }
}, [currentMajor, currentlyDeclared]);

【讨论】：