javascript - 如何在 React 的 localStorage 中设置用户的首选语言
问题描述
我正在尝试通过 localStorage 设置网站用户的首选语言。该站点的默认语言是英语,但如果用户从语言下拉列表中选择西班牙语,则 localStorage 中的 userLanguage 应设置为“es”。我正在关注这篇文章:https ://www.carlrippon.com/react-drop-down-data-binding/以获取有关下拉组件的参考。
我的问题是如何在功能组件中将 localStorage 设置为用户的选择。
我熟悉如何开始设置它,直到这一点:
const [userLanguage, setUserLanguage] = useState();
useEffect(() => {
localStorage.setItem("userLanguage", )
})
我的困惑是如何处理“userLanguage”之后的第 3 行,
下拉选择器组件如下:
const Languages = () => {
const languages = [
{ value: "en", label: "EN" },
{ value: "es", label: "SP" },
];
return (
<>
<LanguagesContainer>
<Select
id="language-selector"
instanceId="language-selector"
inputId="language-selector"
options={languages}
defaultValue={languages[0]}
className="language-selector"
classNamePrefix="language-selector"
/>
</LanguagesContainer>
</>
);
};
解决方案
尝试这样做:
const [userLanguage, setUserLanguage] = useState();
useEffect(() => {
localStorage.setItem("userLanguage", userLanguage ? userLanguage : '')
}, [userLanguage])
推荐阅读
- python - 如何修复属性错误“NoneType”对象没有属性“strip”
- powershell - Powershell GetChildItem 未列出路径
- npm-install - 找不到模块:通过 npm 安装时无法解析“node_modules/bootstrap/dist/css/bootstrap.css”
- webflow - 尽管有团队成员访问权限,但无法在 webflow 中编辑客户端模板
- c# - 同时运行两个任务
- python - 如何创建包含整数和浮点数的集合?
- python-3.x - 从现有的 pytroch 数据集继承而不重新下载数据
- bash - bash if 语句二元运算符
- bot-framework-composer - 如何在 Bot-Framework-Composer V 2.1.1 中添加翻译中间件
- angular - Angular——处理页面刷新