TypeScript多选下拉框提交时数据为空问题求解决方案

你的问题出在没有将Material-UI的多选Select与React Hook Form（RHF）的表单状态正确绑定，同时接口类型定义也和多选场景不匹配，导致提交时permissionIds为null。

核心问题点 #

1. 你手动用useState维护了permit状态，但RHF无法感知这个状态的变化，表单提交时自然拿不到该字段的值。
2. IRole接口中permissionIds定义为string | null，但多选Select返回的是数组类型（你选项的value是number类型），类型不匹配也会导致数据异常。

修复步骤 #

1. 修正IRole接口类型

把permissionIds改为数组类型，匹配多选场景：

export interface IRole {
  id?: number;
  applicationId: number | undefined;
  name: string | null;
  description: string | null;
  permissionIds: number[] | null; // 多选返回数组，类型改为number[]
}

2. 移除手动维护的useState，改用RHF的Controller集成MUI Select

RHF需要通过Controller来控制自定义组件（比如MUI的Select），这样表单状态才能被RHF追踪。修改后的组件逻辑如下：

//Drop Down Data
const permission = [
  {permissionIds:1,permit:'Oliver Hansen'},
  {permissionIds:2,permit:'Van Henry'},
  {permissionIds:3,permit:'April Tucker'}
];

export interface IRole {
  id?: number;
  applicationId: number | undefined;
  name: string | null;
  description: string | null;
  permissionIds: number[] | null;
}

export default function RoleNewEditForm() {
  // 假设你这里有useForm的初始化，比如：
  // const methods = useForm<IRole>({
  //   defaultValues: {
  //     permissionIds: []
  //   }
  // });

  const {
    reset,
    control,
    handleSubmit,
    formState: { isSubmitting },
  } = methods;

  const onSubmit = (data: IRole) => {
    console.log(data); // 现在能正确拿到多选的permissionIds数组
  };

  return (
    <>
      <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
        <RHFTextField name="description" label="Description" />
        <FormControl>
          <InputLabel>Permission</InputLabel>
          {/* 用Controller包裹Select，绑定RHF的表单状态 */}
          <Controller
            name="permissionIds"
            control={control}
            render={({ field: { onChange, value } }) => (
              <Select
                multiple
                value={value}
                onChange={onChange}
                label="Permissions"
                renderValue={(selected) => selected.length ? selected.join(',') : <></>}
              >
                {permission.map(per => (
                  <MenuItem key={per.permissionIds} value={per.permissionIds}>
                    {per.permit}
                  </MenuItem>
                ))}
              </Select>
            )}
          />
        </FormControl>
      </FormProvider>
    </>
  );
};

关键说明 #

• Controller组件通过name和control与RHF关联，接管了Select的value和onChange，让RHF能追踪字段变化。
• 移除了手动的useState和handleChange，改用RHF提供的onChange和value，避免状态不一致。
• 接口类型和实际返回值匹配，避免类型错误导致的数据丢失。

内容的提问来源于stack exchange，提问作者Mohammad Samim Safi