在 React 中分配本地存储值

Question

我在单个网页上实现了一个切换按钮，使用户能够 select 在两种语言（英语和法语）之间切换 - 我正在尝试使用 React 和 i18next 库。到目前为止，切换按钮可以完成工作，但我想将用户首选项保存在本地存储中，直到现在我还没有成功完成该任务。

正如您在下面的代码中注意到的那样，我做了一些测试，将开关按钮 (checked: false) 的初始状态替换为：checked: (lngSelect ? lngSelect : false)

但不幸的是，这不起作用。我也不知道我的代码是否足够干净，我的意思是这是否是执行此类操作的常用方法。

import React, { useState } from 'react';
import Switch from '@material-ui/core/Switch';
import { useTranslation } from 'react-i18next';
import footerStyles from '../../styles/footer.module.scss';

function SwitchBtn() {

    const lngSelect = localStorage.getItem('LngSelect');

    const { i18n } = useTranslation();
    const [state, setState] = useState({
        checked: (lngSelect ? lngSelect : false)
        // checked: false
    });

    function handleTranslation(state) {
        if (state) {
            i18n.changeLanguage('fr');
        } else {
            i18n.changeLanguage('en');
        }
        localStorage.setItem('LngSelect', JSON.stringify(state));
    }

    return (
        <Switch
            className={footerStyles.switchBtn}
            checked={state.checked}
            onChange={(e) => {
                setState({ checked: e.target.checked });
                handleTranslation(e.target.checked);
            }}
            name="languagesSwitch"
        />
    )
}

export default SwitchBtn

Answer 1

您似乎正在将整个字符串化的 state 对象存储到本地存储中。在这种情况下，您需要使用 JSON.parse() 将 JSON 字符串解析为有效的 JavaScript 对象，然后再为 useState 挂钩分配初始值。

const lngSelect = JSON.parse(localStorage.getItem('LngSelect'));
const [state, setState] = useState({
  checked: lngSelect.checked,
});

在 React 中分配本地存储值

Assign local storage value in React

javascript

reactjs

local-storage

i18next