为什么不从上下文中刷新select元素?

Question

我有一个简单的下拉菜单。它从本地存储和上下文刷新状态。上下文刷新，我可以在页面的任何地方使用，除了在选择值。

这个下拉菜单有一个默认值。(HU,EN，，DE,HR)虽然状态为refresh

，但不是refresh它保持'HU'。虽然国家变了。页面其他部分工作正常

我使用钩子。谢谢你

这是我的codesandbox: 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>
);
}

Answer 1

尝试更新你的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只执行一次，这就解决了问题。

Answer 2

上面提供的答案似乎并没有解决我的问题(通过进入提供的代码沙箱进行验证，并且在进行更改后仍然不工作)。

问题在于您保存和解析值的方式。当存储它时，您是JSON.stringify值，但是当从localStorage检索它时，您不是JSON.parse值。有关解决方案，请参阅此代码沙箱:https://codesandbox.io/s/recursing-tree-7sn98k?file=/src/ContextWrapper.js

或者，您也可以在存储它时不JSON.stringify值，但是考虑到localStorage值必须是字符串(否则将是.toString()'d)，我确实认为在输入时将值字符串化的方法更具容错性。