React Form Hook结合Material UI Select组件默认值不加载问题

问题核心原因 #

这类情况通常由以下几点导致：

• 类型不匹配：reset传入的clientSourceId和MenuItem的value类型不一致（比如一个是字符串、一个是数字），React Hook Form会严格校验值的匹配，类型不匹配就无法选中对应选项。
• 初始状态缺失：Controller未设置defaultValue，异步加载数据前表单处于无初始值状态，后续reset后Select无法正确识别选中项。
• 选项未加载完成：调用reset时clientSources还没加载完毕，Select没有对应选项，自然无法显示选中状态。

具体解决步骤 #

1. 校验类型一致性
   确认clientData.clientSourceId的类型和clientSources中每个clientSource.id的类型完全一致。比如如果id是UUID字符串，要确保reset传入的也是字符串类型，避免数字与字符串不匹配的情况。

2. 给Controller添加defaultValue
   在Controller组件中明确设置defaultValue，类型要和clientSource.id一致，比如空字符串''（id为字符串时）或0（id为数字时），确保表单初始化时有合法的初始状态。

3. 确保选项加载完成后再渲染Select
   添加条件渲染，当clientSources为空时显示加载状态，避免在选项未准备好时执行reset操作。

修改后的代码示例 #

import { CircularProgress } from '@mui/material';

export const ClientSourceSelect = ({
  control,
  clientSources,
  getValues,
  errors,
}: ClientSourceSelectProps) => {
  // 选项未加载完成时显示加载动画
  if (!clientSources?.length) {
    return <CircularProgress />;
  }

  return (
    <FormControl fullWidth>
      <Controller
        control={control}
        name="clientSourceId"
        defaultValue="" // 此处类型需与clientSource.id一致
        render={({ field: { onChange, value } }) => (
          <>
            <TextField label={value}></TextField>
            <Select onChange={onChange} value={value}>
              {/* 添加空选项，处理value为空的场景 */}
              <MenuItem value="">请选择</MenuItem>
              {clientSources.map((clientSource) => (
                <MenuItem key={clientSource.id} value={clientSource.id}>
                  {clientSource.name}
                </MenuItem>
              ))}
            </Select>
          </>
        )}
      />
    </FormControl>
  );
};

额外检查点 #

• 调用reset({ ...clientData })时，打印clientData.clientSourceId和clientSources中的id，确认两者完全匹配（包括大小写、是否存在多余空格）。
• 如果useForm初始化时设置了defaultValues，要确保defaultValues.clientSourceId的类型和后续reset的值一致。

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