导航到新页面时使用本地存储保留 state 个单选按钮

Question

下面的代码代表两组单选按钮。 每当用户单击每组中的一个按钮时，他们将被传送到一个新页面，该页面上具有完全相同的一组单选按钮。 但是每当他们导航到新页面或刷新页面时，最新的 state 个单选按钮就会丢失。 有没有一种方法可以存储每组单选按钮的最新值，并在我们导航到新页面或刷新页面时检索/显示最新值？

提前致谢！

import { useNavigate } from 'react-router-dom';

export default function DisplayHomeOptions() {
    let navigate = useNavigate();
    const [formData, setFormData] = React.useState({ location: "", selector: "" })

    function handleChange(event) {
        const { name, value, type, checked } = event.target
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [name]: type === "checkbox" ? checked : value
            }
        })
    }

    useEffect(() => {
        const { location, selector } = formData;
        if (location && selector) {
            const target = navTarget[location][selector];
            if (target) {
                navigate(target);
            }
        }
    }, [formData]);

    const navTarget = {

        National: {
            Messages: "/national/messages",
            Polls: "/national/polls",
            Questions: "/national/questions",
        },
        Global: {
            Messages: "/global/messages",
            Polls: "/global/polls",
            Questions: "/global/questions",
        }
    }

    return (
        <div>
            <fieldset>
                <legend>Option #1</legend>
                <input
                    type="radio"
                    name="location"
                    value="Global"
                    onChange={handleChange}
                />

                <label htmlFor="Global">Global</label>
                <input
                    type="radio"
                    name="location"
                    value="National"
                    onChange={handleChange}
                />
                <label htmlFor="National">National</label>
            </fieldset>

            <fieldset>
                <legend>Option #2</legend>
                <input
                    type="radio"
                    name="selector"
                    value="Messages"
                    onChange={handleChange}
                />
                <label htmlFor="Messages">Messages</label>
                <input
                    type="radio"
                    name="selector"
                    value="Questions"
                    onChange={handleChange}
                />
                <label htmlFor="Questions">Questions</label>
                <input
                    type="radio"
                    name="selector"
                    value="Polls"
                    onChange={handleChange}
                />
                <label htmlFor="Polls">Polls</label>
            </fieldset>
        </div>
    )
}```

Answer 1

我建议将所有按钮的 state 保存在一个 object 中，然后使用JSON.stringify()将其放入字符串中。

我将添加一个非常简短的示例来说明我的意思：

State部分组件：

// Default state if browserstorage is empty
const defaultState = {
    button1: false,
    button2: false,
    button3: false,
}
// Get state from browser storage
const currentState = JSON.parse(localStorage.getItem("buttonState"))

// Initialise state with browser state or default state
const [state, setState] = useState(currentState || defaultState)

处理更改 function

const handleChange = (e) => {
    // Create new state
    const newState = {...state, e.target.name: e.target.value}
    // Stringify new state and store it in the browsers local storage
    localStorage.setItem("buttonState", JSON.stringify(newState))
    // Set New State
    setState(newState)
}

按钮/开关需要设置name属性以匹配 state 名称才能使此示例正常工作。

这是一个一般的例子，但你明白了