react-hook-form通过fetch获取数据后无法给select组件赋值如何解决

核心问题1：Controller内置的field属性被自定义属性覆盖 #

你在TextField上先展开了{...field}，但后续又单独声明了name={name}、onBlur={onBlur}，会直接覆盖field对象中react-hook-form内置的同名属性：

• field.onBlur是react-hook-form用来触发表单状态同步、校验的核心方法，被自定义onBlur覆盖后，select组件无法感知回填值的变化，自然无法正确渲染选中项
• 重复声明name属于冗余操作，还可能出现变量不一致的问题

核心问题2：返回的uf值与下拉选项的value类型/内容不匹配 #

如果field属性没有被覆盖，优先核对以下两点：

• 接口返回的res.uf值的类型、内容要和<MenuItem>的value完全一致，比如接口返回字符串"RJ"，但选项value写的是数字21、或者带空格的" RJ "，都会导致匹配失败无法选中
• 确认addressReset方法是react-hook-form提供的setValue或者正确配置的reset方法，如果是自定义的reset方法，需要确认是否正确触发了select组件的重渲染

修复代码 #

修改Controller封装逻辑，保留内置的field方法，自定义onBlur需要合并执行：

<Controller
  control={control}
  name={name}
  render={({ field }) => (
    <TextField
      {...field}
      disabled={!!disabled}
      select={!!select}
      fullWidth={!!fullWidth}
      autoComplete={name}
      type={type}
      label={label}
      error={Boolean(errors[name])}
      helperText={errors[name]?.message || ""}
      variant="outlined"
      required={!!required}
      id={name}
      InputLabelProps={InputLabelProps}
      InputProps={InputProps}
      size={size}
      // 合并原生onBlur和自定义onBlur，不要覆盖field的方法
      onBlur={(e) => {
        field.onBlur(e)
        onBlur?.(e)
      }}
    >
      {children}
    </TextField>
  )}
/>

如果修改后依然不生效，打印res.uf和所有下拉选项的value，确认二者完全匹配即可。

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