React/Next.js select onChange设置state后选中值未同步生效问题

问题根因 #

• defaultValue仅在组件首次渲染时生效，后续state更新不会同步到select组件，受控组件必须使用value属性做绑定。
• 值匹配逻辑错误：的value设置为路由地址navItem.href，但你存入state的selectedSubNav是导航名称，两者值完全不匹配，无法触发选中对应选项。
• setSelectedSubNav是异步更新接口，调用后立刻打印selectedSubNav拿到的是更新前的旧值，属于React的正常设计，不代表state更新失败。
• 首次进入页面时没有根据当前路由初始化选中值，默认选中为空，也会导致初始状态不匹配。

修复代码 #

这里我们统一用路由地址作为select的绑定值，匹配逻辑更直观，修改后代码如下：

import { useState, useEffect } from 'react'
// 以下是Next.js路由的导入示例，其他框架根据自身路由能力调整即可
import { useRouter, usePathname } from 'next/navigation' 
import type { ChangeEvent } from 'react'

const navigation = [
    { name: 'Profil', href: '/unternehmen/profil' },
    { name: 'Geschichte', href: '/unternehmen/geschichte' },
]

const SubNavigation = () => {
    const [selectedSubNav, setSelectedSubNav] = useState('')
    const router = useRouter()
    const currentPath = usePathname() // Next.js 13+获取当前路径方法，旧版本用router.asPath

    // 初始化及路由变化时同步选中状态
    useEffect(() => {
        const matchNav = navigation.find(nav => nav.href === currentPath)
        if (matchNav) setSelectedSubNav(matchNav.href)
    }, [currentPath])

    const onSubNavChange = (e: ChangeEvent<HTMLSelectElement>) => {
        e.preventDefault()
        const targetHref = e.target.value
        setSelectedSubNav(targetHref)
        router.push(targetHref)
    }

    return (
        <div className="relative pb-5 sm:pb-0">
            <div className="mt-4">
                <div className="sm:hidden">
                    <select
                        id="current-tab"
                        name="current-tab"
                        value={selectedSubNav}
                        onChange={onSubNavChange}
                    >
                        {navigation.map((navItem) => (
                            <option value={navItem.href} key={navItem.name}>
                                {navItem.name}
                            </option>
                        ))}
                    </select>
                </div>
            </div>
        </div>
    )
}

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