Estoy tratando de integrar información previa de localStorage en el DOM para que el usuario pueda verla después de volver a visitar la página en el mismo navegador. Por alguna razón, la recarga establece las propiedades major y declared en localStorage en undefined .
¿Alguien podría decirme por qué sucede esto y cómo puedo solucionarlo? Aquí está mi código:
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;El problema es causado por el primer useEffect , se ejecuta antes que el segundo cuando se monta el componente y establece los valores en localStorage en los valores iniciales de sus estados, undefined ya que no configuró ninguno al llamar a useState . Una forma de evitar este problema es:
useEffect(() => { if (currentlyDeclared) { localStorage.setItem("declared", currentlyDeclared); } if (currentMajor) { localStorage.setItem("major", currentMajor); } }, [currentMajor, currentlyDeclared]);