带有 MUI Autocomplete、FreeSolo 和依赖字段的 React Hook 表单

您的代码中存在几个问题：

• 你忘了把道具传给你rules<Controller />
• 当前选定的值将作为第二个参数传递给 的处理程序<Autocomplete />onChange
• 您需要使用 RHF 的方法对这 3 个相关字段的变化做出反应，并相应地过滤其他选择的选项watch
• 您需要使用而不是用于邮政编码选项的映射，就像数组一样flatMapmapoption.cap

export default function PersonalDetails() {
  const { watch } = useFormContext();

  const { postalCode, city, state } = watch("personalDetails");

  return (
    <Card variant="outlined" sx={{ width: 1 }}>
      <CardContent>
        <Grid container item spacing={2}>
           <Grid item xs={12} lg={3}>
            <SelectFree
              name="personalDetails.postalCode"
              label="ZIP (CAP)"
              options={options
                .filter((option) =>
                  city || state
                    ? option.nome === city || option.sigla === state
                    : option
                )
                .flatMap((option) => option.cap)}
              rules={{ required: "Richiesto" }}
            />
          </Grid>
          <Grid item xs={12} lg={10}>
            <SelectFree
              name="personalDetails.city"
              label="City (Città)"
              options={options
                .filter((option) =>
                  postalCode || state
                    ? option.cap.includes(postalCode) || option.sigla === state
                    : option
                )
                .map((option) => option.nome)}
              rules={{ required: "Richiesto" }}
            />
          </Grid>
          <Grid item xs={12} lg={2}>
            <SelectFree
              name="personalDetails.state"
              label="State (Sigla)"
              options={options
                .filter((option) =>
                  city || postalCode
                    ? option.nome === city || option.cap.includes(postalCode)
                    : option
                )
                .map((option) => option.sigla)}
              rules={{ required: "Richiesto" }}
            />
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
}

export default function SelectFree({
  name,
  rules,
  options,
  getOptionLabel,
  ...rest
}) {
  const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      rules={rules}
      defaultValue={null}
      render={({
        field: { ref, ...field },
        fieldState: { error, invalid }
      }) => {
        return (
          <Autocomplete
            {...field}
            freeSolo
            handleHomeEndKeys
            options={options}
            getOptionLabel={getOptionLabel}
            renderInput={(params) => (
              <TextField
                {...params}
                {...rest}
                inputRef={ref}
                error={invalid}
                helperText={error?.message}
              />
            )}
            onChange={(e, value) => field.onChange(value)}
            onInputChange={(_, data) => {
              if (data) field.onChange(data);
            }}
          />
        );
      }}
    />
  );
}

更新

由于您有一个非常大的 json 文件，因此有两个选项可以优化性能：

• 通过 -> 的 prop 限制选项的数量，该函数可以配置为设置限制filterOptions<Autocomplete />createFilterOptions
• 在将选项传递给 之前，添加一个钩子用于过滤和映射选项，例如，现在在其他字段 （， ， ） 的每次输入更改时，选项将被重新计算useMemo<Autocomplete />firstNamelastNameaddress