React.js中radio按钮onClick触发路由跳转首次不生效问题

你遇到的延迟一步跳转的bug由两个问题共同导致：

• 事件执行顺序不符预期：单选框的onClick触发时间早于onChange，点击时绑定在onChange上的状态更新逻辑还没执行
• React状态更新是异步批量执行的：在onClick触发的test函数中读取到的formData永远是点击前的旧值，不是本次点击选中的新值。第一次选完两个选项时，判断逻辑拿到的还是缺少最新选中值的旧状态，不满足跳转条件；等下一次点击触发状态更新后，才会拿到上一次选好的完整组合，触发对应跳转。

不要在点击事件中做依赖最新状态的跳转判断，改用useEffect监听选中值的状态，等状态更新完成后再执行路由匹配逻辑，这是React下处理这类联动逻辑的标准写法。

修复后的完整代码如下：

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

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

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

    // 监听选项变化，两个值都选中时自动跳转
    useEffect(() => {
        // 任意一个选项未选时不执行跳转逻辑
        if (!formData.location || !formData.selector) return;

        // 路由映射表代替多层三元，易读易维护
        const routeMap = {
            'National-Polls': '/np',
            'Global-Questions': '/gq',
            'Global-Polls': '/gp',
            'National-Messages': '/nm',
            'National-Questions': '/nq',
            'Global-Messages': '/gm'
        }

        const targetPath = routeMap[`${formData.location}-${formData.selector}`]
        if (targetPath) navigate(targetPath)
    }, [formData, navigate])


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

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

• 移除了所有单选框上绑定的onClick={test}，从根源避免事件顺序和异步状态导致的取值错误
• 新增useEffect监听formData变化，每次状态更新完成后才执行判断逻辑，确保拿到的是最新选中值；只要任意一个选项未选中就直接返回，两个都选中时自动匹配路由跳转
• 补全了所有单选框的id属性，和label的htmlFor属性一一对应，修复了原来点击label无法选中对应单选框的小问题
• 把原代码里多层嵌套的三元判断替换为路由映射表，代码可读性更高，后续新增选项组合时只需要在映射对象中加一条键值对即可，维护成本更低

内容的提问来源于stack exchange，提问作者sebdoy