基于Refine框架的MUI Autocomplete下拉框预填关联数据问题

问题根源 #

1. 初始值时机偏差：页面加载时processDetails尚未获取，Autocomplete的defaultValue无法正确赋值；后续processDetails加载完成后，defaultValue不会自动更新。
2. 表单值绑定错误：Autocomplete的value逻辑与react-hook-form字段值未正确同步，自定义过滤逻辑存在执行时机问题。
3. Refine useForm配置缺失：编辑页面未利用useForm的初始值管理能力，依赖组件defaultValue导致数据不同步。

解决方案 #

1. 同步表单初始值 #

在获取processDetails后，调用useForm的setValues方法，将流程关联的用户和仪表盘数据同步到表单字段：

// 解构useForm中的setValues方法
const {
  control,
  saveButtonProps,
  refineCore: { formLoading },
  formState: { errors },
  setValues,
} = useForm({
  defaultValues: {
    name: "",
    description: "",
    users: [],
    dashboards: [],
  },
});

// 修改fetchProcessDetails函数
const fetchProcessDetails = async () => {
  try {
    const response = await axios.get(`${API_URL}/processes/${id}`);
    const processData = response.data.data;
    setProcessDetails(processData);
    // 设置表单初始值
    setValues({
      name: processData.name,
      description: processData.description,
      users: processData.users.map(user => user.email),
      dashboards: processData.dashboards.map(dashboard => dashboard.title),
    });
  } catch (error) {
    console.error("Fetching error", error);
  }
};

2. 修正Autocomplete的value绑定 #

移除Autocomplete的defaultValue，让react-hook-form的field.value完全控制选中状态，同时将字符串数组转换为Autocomplete需要的对象数组：

用户下拉框修改：

<Controller
  name="users"
  control={control}
  render={({ field }) => (
    <Autocomplete
      {...field}
      multiple
      id="users-autocomplete"
      options={users}
      getOptionLabel={(option) => option.label}
      // 从users数组中匹配field.value里的邮箱
      value={users.filter(user => field.value.includes(user.label))}
      onChange={(_, data) => {
        const newValue = data.map((d) => d.label);
        field.onChange(newValue);
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Users"
          margin="normal"
          error={!!errors.users}
          helperText={errors.users?.message}
        />
      )}
    />
  )}
/>

仪表盘下拉框修改：

<Controller
  name="dashboards"
  control={control}
  render={({ field }) => (
    <Autocomplete
      {...field}
      multiple
      id="dashboards-autocomplete"
      options={dashboards}
      getOptionLabel={(option) => option.label}
      // 从dashboards数组中匹配field.value里的标题
      value={dashboards.filter(dashboard => field.value.includes(dashboard.label))}
      onChange={(_, data) => {
        const newValue = data.map((d) => d.label);
        field.onChange(newValue);
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Dashboards"
          margin="normal"
          error={!!errors.dashboards}
          helperText={errors.dashboards?.message}
        />
      )}
    />
  )}
/>

3. 优化数据加载顺序（可选） #

如果接口请求存在时序问题，可并行请求所有数据，确保users/dashboards就绪后再设置表单值：

useEffect(() => {
  const fetchAllData = async () => {
    try {
      // 并行请求所有接口
      const [usersRes, dashboardsRes, processRes] = await Promise.all([
        axios.get(`${API_URL}/users`),
        axios.get(`${API_URL}/dashboards`),
        axios.get(`${API_URL}/processes/${id}`),
      ]);

      // 处理用户数据
      const usersData = usersRes.data.data.map((user) => ({ label: user.email }));
      setUsers(usersData);

      // 处理仪表盘数据
      const dashboardsData = dashboardsRes.data.data.map((dashboard) => ({ label: dashboard.title }));
      setDashboards(dashboardsData);

      // 设置流程详情和表单初始值
      const processData = processRes.data.data;
      setProcessDetails(processData);
      setValues({
        name: processData.name,
        description: processData.description,
        users: processData.users.map(user => user.email),
        dashboards: processData.dashboards.map(dashboard => dashboard.title),
      });
    } catch (error) {
      console.error("Fetching error", error);
    }
  };

  fetchAllData();
}, [id, setValues]);

关键说明 #

• 依赖react-hook-form的setValues方法设置初始值，避免组件defaultValue仅初始化一次的局限性。
• Autocomplete的value必须是从options数组中匹配的对象，需通过filter将字段的字符串值转换为对应选项对象。
• 并行请求可避免因数据加载顺序导致的匹配失败，确保所有选项数据就绪后再设置表单值。

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