React中<select/>设置defaultValue不生效？

问题

这样一种写法下，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>
    )
}