刷新页面后 localStorage 值设置为 undefined

Question

我正在尝试将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;

Answer 1

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

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