我有一個簡單的下拉選單。我從本地存盤和背景關系中重繪 狀態。背景關系重繪 ，我可以在頁面中的任何地方使用，除了選擇值。
此下拉串列有一個默認值。(HU,EN,,DE,HR) 狀態重繪 但不重繪
我不會留下'HU'。雖然狀態變了。頁面其他部分正常作業
我用鉤子。謝謝
這是我的代碼框：
https://codesandbox.io/s/eager-river-t45b3r?file=/src/LanguageDropDown.js
LanguageDropDown.js
import React, { useState, useContext } from "react";
import GlobalContext from "./GlobalContext";
import classes from "./LanguageDropDown.module.css";
export default function LanguageDropDown() {
const { language, setLanguage } = useContext(GlobalContext);
console.log(`This is the language state from context: ${language}`);
return (
<div className={classes.div}>
<select
className={classes.languageDropDown}
value={language}
onChange={(e) => {
const selectedLanguage = e.target.value;
console.log(`this is the selected: ${selectedLanguage}`);
setLanguage(selectedLanguage);
localStorage.setItem("language", JSON.stringify(selectedLanguage));
}}
>
<option value="hu">HU</option>
<option value="en">EN</option>
<option value="de">DE</option>
<option value="hr">HR</option>
</select>
<h1>Here the good result:{language}</h1>
</div>
);
}
ContextWrapper.js
import React, { useState, useEffect } from "react";
import GlobalContext from "./GlobalContext";
export default function ContextWrapper(props) {
const [language, setLanguage] = useState("");
useEffect(() => {
const storageLanguage = localStorage.getItem("language");
console.log(`this is the storagelanguage: ${storageLanguage}`);
if (storageLanguage) {
function setLanguageData() {
setLanguage(storageLanguage);
}
setLanguageData();
}
}, [language]);
return (
<GlobalContext.Provider
value={{
language,
setLanguage,
}}
>
{props.children}
</GlobalContext.Provider>
);
}
uj5u.com熱心網友回復：
嘗試將您的 useEffect 更新為以下內容：
useEffect(() => {
const storageLanguage = localStorage.getItem("language");
console.log(`this is the storagelanguage: ${storageLanguage}`);
if (storageLanguage) {
function setLanguageData() {
setLanguage(storageLanguage);
}
setLanguageData();
}
}, []); //Remove the language from here.
添加[language]到依賴項陣列會執行useEffect下拉選單中的每次語言更改。這反過來再次設定下拉串列的值。
保持依賴陣列為空useEffect，讓我們useEffect只執行一次，這樣就解決了這個問題。
uj5u.com熱心網友回復：
問題在于您保存和決議值的方式。您JSON.stringify在存盤它時正在 ing 值，但JSON.parse在從 localStorage 中檢索它時卻沒有。請參閱此代碼沙箱以獲取解決方案：https ://codesandbox.io/s/recursing-tree-7sn98k?file=/src/ContextWrapper.js
或者，您也可以JSON.stringify在存盤它時不使用該值，但考慮到 localStorage 值必須是字串（否則將是.toString()'d ），我確實相信在輸入程序中對值進行字串化的方法更具容錯性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/486671.html
標籤：javascript 反应 选择 反应钩子