問題

這樣一種寫法下，defaultValue是不會生效的。

function Test() {
    const [dv, setDv] = useState(0)

    // 在某個元素的點擊回調中setDv()
    // foo.onClick = () => {setDv(bar)}

    return(
        <select
            defaultValue={dv}
        >
            <option value='1' >1</option>
            <option value='2' >2</option>
            <option value='3' >3</option>
        </select>
    )
}

解決

給<select/>加個動態key強制執行渲染。

function Test() {
    const [dv, setDv] = useState(0)

    // 在某個元素的點擊回調中setDv()
    // foo.onClick = () => {setDv(bar)}

    return(
        <select
            key={Date.now()}
            defaultValue={dv}
        >
            <option value='1' >1</option>
            <option value='2' >2</option>
            <option value='3' >3</option>
        </select>
    )
}