打开编辑表单时，因全局/公司两类ID类型，输入框无法预填值

问题描述 #

打开编辑表单时，因存在全局（global）和公司（company）两种ID类型，表单输入框（如benefits_id等字段）无法正确加载预填值。

现有代码逻辑 #

表单预填值设置代码 #

editForm.setFieldsValue({
  name: entity.name,
  unique_identifier: entity.unique_identifier,
  sector_id: entity.sector,
  country_id: entity.country,
  currency_id: entity.currency,
  benefits_id: entity.global_benefits_id
    ? `global${entity.global_benefits_id}`
    : entity.company_benefits_id
      ? `company${entity.company_benefits_id}`
      : null,
  discount_rate_id: entity.global_discount_rate_id
    ? `global${entity.global_discount_rate_id}`
    : entity.company_discount_rate_id
      ? `company${entity.company_discount_rate_id}`
      : null,
  mortality_rate_id: [
    ...(entity.global_mortality_rate_ids?.map((id) => `global${id}`) || []),
    ...(entity.company_mortality_rate_ids?.map((id) => `company${id}`) || []),
  ],
  withdrawal_rate_id: [
    ...(entity.global_withdrawal_rate_ids?.map((id) => `global${id}`) || []),
    ...(entity.company_withdrawal_rate_ids?.map((id) => `company${id}`) || []),
  ],
  report_template: entity.report_template || "",
  valuation_text: entity.valuation_text || "",
  report_calculator: entity.report_calculator || "",
  employee_data_template: entity.employee_data_template || "",
});

这段代码通过setFieldsValue为表单字段赋值，核心逻辑：

• 单值字段（如benefits_id）根据entity中的全局/公司ID字段，拼接global/company前缀生成表单值
• 多值字段（如mortality_rate_id）通过map为每个ID添加前缀后合并成数组

下拉选择组件代码 #

<Col xxl={8} xl={8} lg={8} md={24} sm={24} xs={24}>
  <Item
    hasFeedback
    label={<FormLabel label="Select Benefits" />}
    name="benefits_id"
    rules={[{ required: true, message: "This field is required." }]}
  >
    <Select
      placeholder={
        (isCompanyBenefitsLoading || isGlobalBenefitsLoading) && (
          <>
            <Spin size="small" />
          </>
        )
      }
      allowClear
      showSearch
      optionFilterProp="children"
      filterOption={(input, option) =>
        option.children.toLowerCase().includes(input.toLowerCase())
      }
      loading={isCompanyBenefitsLoading || isGlobalBenefitsLoading}
      options={[
        {
          label: "Global Benefits",
          title: "Global Benefits",
          options: globalBenefitsData?.map((g) => ({
            label: g?.name,
            value: `global${g?.id}`,
          })),
        },
        {
          label: "Company Benefits",
          title: "Company Benefits",
          options: companyBenefitsData?.map((c) => ({
            label: c?.name,
            value: `company${c?.id}`,
          })),
        },
      ]}
    />
  </Item>
</Col>

该Select组件将全局/公司福利数据分组，每个选项的value都拼接了对应前缀，与预填值的格式逻辑一致。

可能的问题原因 #

1. 数据加载时机不匹配：setFieldsValue执行时，globalBenefitsData或companyBenefitsData尚未加载完成，Select组件无选项可匹配预填值
2. ID格式不一致：entity中的ID可能为数字类型，拼接前缀后虽转为字符串，但存在隐式转换异常的可能
3. 多值字段数组处理疏漏：mortality_rate_id等字段的数组拼接逻辑未严谨处理空值/空数组情况
4. 表单字段名拼写错误：setFieldsValue中的键与表单Item的name属性不匹配

修复方案 #

1. 延迟预填值设置到数据加载完成后 #

确保在全局/公司福利数据加载完成后再执行setFieldsValue，以React为例：

useEffect(() => {
  // 数据加载完成且entity存在时再设置表单值
  if (!isCompanyBenefitsLoading && !isGlobalBenefitsLoading && entity) {
    editForm.setFieldsValue({
      // 原有字段赋值逻辑
      name: entity.name,
      unique_identifier: entity.unique_identifier,
      benefits_id: entity.global_benefits_id
        ? `global${String(entity.global_benefits_id)}`
        : entity.company_benefits_id
          ? `company${String(entity.company_benefits_id)}`
          : null,
      // ... 其他字段
    });
  }
}, [isCompanyBenefitsLoading, isGlobalBenefitsLoading, entity, editForm]);

2. 统一ID字符串格式 #

显式将entity中的ID转为字符串，避免类型不匹配：

benefits_id: entity.global_benefits_id
  ? `global${String(entity.global_benefits_id)}`
  : entity.company_benefits_id
    ? `company${String(entity.company_benefits_id)}`
    : null,

3. 优化多值字段数组处理逻辑 #

添加长度判断，避免空数组/undefined导致的异常：

mortality_rate_id: [
  ...(entity.global_mortality_rate_ids?.length ? entity.global_mortality_rate_ids.map(id => `global${String(id)}`) : []),
  ...(entity.company_mortality_rate_ids?.length ? entity.company_mortality_rate_ids.map(id => `company${String(id)}`) : []),
],

4. 验证字段名一致性 #

检查表单Item的name属性（如benefits_id）与setFieldsValue中的键是否完全一致，无拼写错误。

5. 调试匹配情况 #

添加日志确认预填值与选项value是否完全匹配：

const formValues = {
  benefits_id: entity.global_benefits_id ? `global${String(entity.global_benefits_id)}` : entity.company_benefits_id ? `company${String(entity.company_benefits_id)}` : null,
  // ... 其他字段
};
console.log('表单预填值:', formValues.benefits_id);
console.log('福利选项value列表:', [...(globalBenefitsData?.map(g => `global${g.id}`) || []), ...(companyBenefitsData?.map(c => `company${c.id}`) || [])]);
editForm.setFieldsValue(formValues);

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