react select 标签 defaultValue 和 value 踩坑日记

最近在写react项目，需要设置下拉框默认值.
第一版本：使用defaultValue，发现刷新页面，数据错误
分析：defaultValue只在页面挂载时渲染一次，后续数据发生变化，不再重新渲染

<div className="month">
    <select defaultValue="dayjs().get("month")" onChange={(e) => onChange(e)}>
        {months.map(month => <option key={month} value={month} >{month}</option>)}
    </select>
    月
</div>

第二版：修改为value，点击select，发现数据更新了，但页面不更新；
分析：value需要接收一个动态数据，dayjs().get(“month”)是一个死值。

<div className="month">
    <select value="dayjs().get("month")" onChange={(e) => onChange(e)}>
        {months.map(month => <option key={month} value={month} >{month}</option>)}
    </select>
    月
</div>

第三版：使用value绑定动态数据，且绑定onChange监听函数

    const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        let date = e.target.value
        if (date.length === 4) {
            setSelectDate({
                year: date,
                month: selectDate.month
            })
        } else {
            setSelectDate({
                year: selectDate.year,
                month: date
            })
        }
    }

<div className="month">
    <select value={selectDate.month} onChange={(e) => onChange(e)}>
        {months.map(month => <option key={month} value={month} >{month}</option>)}
    </select>
    月
</div>