React页面加载时select标签未显示state设置的默认值如何解决

React 受控表单的select组件要求绑定的value值必须和某一个option的value属性严格相等（===），才会选中对应选项。
你的代码里初始state设置的是'2022'，但3个选项的value分别是'1'、'2'、'3'，没有任何一个option的value等于'2022'，组件找不到匹配项时就会默认渲染第一个选项，又因为两边都是字符串类型，不存在类型不匹配的报错，所以控制台没有任何提示。

二选一即可：

• 方案1：调整option的value值，和年份文本、state初始值保持一致
  修改ExpenseFilter组件的选项配置：

<select
  value={props.value}
  onChange={props.selectHandler}
  className="form-select"
  aria-label="Default select example">
  <option value="2020">2020</option>
  <option value="2021">2021</option>
  <option value="2022">2022</option>
</select>

这种写法最直观，后续拿到选中值可以直接当年份用，不需要额外转换，是更推荐的写法。

• 方案2：保留现有option的序号value，修改state初始值为匹配的序号
  如果业务逻辑要求option的value必须用1/2/3的序号，就把Expenses组件里的初始state改成对应2022选项的value：

const [value, setValue] = useState('3');

选这种方案需要额外加一层值和年份的映射，后续做列表筛选时要把序号转成对应年份再匹配：

const yearMap = {
  '1': '2020',
  '2': '2021',
  '3': '2022'
}
// 筛选逻辑里通过yearMap[value]拿到实际年份即可

注意：React 不会对受控表单的绑定值做隐式类型转换或内容匹配，写这类组件时优先检查绑定值和选项值是否严格相等，能避开绝大多数无报错的选中异常问题。

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