React.js中FormControl自定义下拉组件如何正确设置defaultValue

你使用的FormSelectNative组件内，下拉选项MenuItem的value属性绑定的是option[valueKey]字段。你调用组件时传入的valueKey为id，也就是说所有下拉选项的实际匹配值都是游戏对象的id属性（数字类型）。
你之前传入的defaultValue={games[0]}是完整的游戏对象，和选项的value值类型、内容都不匹配，无法对应到任何选项，所以默认值不生效。

直接调整defaultValue的取值，取游戏数组第一个元素的id字段即可，同时可添加可选链避免数组为空时报错：

<FormSelectNative
  options={games}
  valueKey="id"
  labelKey="name"
  onChange={handleGameSelect}
  defaultValue={games[0]?.id || ''} 
/>

补充说明：如果games是异步请求获取的数组，需要确保数组有值之后再渲染组件，或者在数组加载完成后手动更新值，避免异步未完成时games[0]为undefined导致默认值还是为空。

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