我正在嘗試將 localStorage 中的先前資訊集成到 DOM 中，以便用戶在同一瀏覽器中重新訪問頁面后可以看到它。出于某種原因，重新加載會將majoranddeclared屬性設定localStorage為未定義。誰能告訴我為什么會發生這種情況以及我該如何解決？
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;
uj5u.com熱心網友回復：
問題是由第一個引起的useEffect，當組件安裝時它在第二個之前運行，并且它將值設定為localStorage狀態的初始值，undefined因為您在呼叫useState. 避免這種情況的一種方法是：
useEffect(() => {
if(currentlyDeclared){
localStorage.setItem("declared", currentlyDeclared);
}
if(currentMajor){
localStorage.setItem("major", currentMajor);
}
}, [currentMajor, currentlyDeclared]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485747.html
標籤：javascript 反应 反应选择 下一个