如何在Next.js/React.js中清除Ant Design关联级联下拉选择器的值

针对你遇到的facility/specialization变化时无法清空doctorId下拉的问题，以下是经过验证的可行方案：

1. 完整重置表单字段（值+校验状态） #

仅设置doctorId: undefined可能残留字段的校验状态，导致自定义下拉组件仍显示旧选中值。需要同时重置字段的校验信息：

useEffect(() => {
  // 清空doctorId的表单值
  form.setFieldsValue({ doctorId: undefined });
  // 重置该字段的校验状态，避免残留错误/警告提示
  form.setFields([{ name: 'doctorId', errors: [], warnings: [] }]);
  // 重置医生选项列表
  setDoctorOptions([]);
}, [facilityId, specializationId, form]);

2. 让自定义下拉组件完全受控 #

确保SearchableDropDown的选中状态完全由Form字段值驱动，避免组件内部维护独立状态：

<Form.Item name="doctorId" label="医生">
  <SearchableDropDown
    value={form.getFieldValue('doctorId')}
    onChange={(selectedValue) => {
      form.setFieldsValue({ doctorId: selectedValue });
    }}
    options={doctorOptions}
  />
</Form.Item>

如果组件内部必须维护状态，要在value变化时同步更新内部状态（比如在组件内监听value prop的变化）。

3. 优化联动数据加载时机 #

在facility或specialization变更后，先清空医生选项，再根据新的条件请求数据，确保数据加载与字段清空的顺序正确：

useEffect(() => {
  // 先清空字段和选项
  form.setFieldsValue({ doctorId: undefined });
  form.setFields([{ name: 'doctorId', errors: [], warnings: [] }]);
  setDoctorOptions([]);

  // 当两个条件都存在时，请求新的医生数据
  if (facilityId && specializationId) {
    // 模拟请求医生数据
    fetch(`/api/doctors?facility=${facilityId}&specialization=${specializationId}`)
      .then(res => res.json())
      .then(data => setDoctorOptions(data));
  }
}, [facilityId, specializationId, form]);

4. 强制组件刷新（兜底方案） #

如果上述方案仍无效，可通过key属性强制SearchableDropDown在联动条件变化时重新渲染：

<SearchableDropDown
  key={`doctor-dropdown-${facilityId}-${specializationId}`}
  value={form.getFieldValue('doctorId')}
  onChange={(value) => form.setFieldsValue({ doctorId: value })}
  options={doctorOptions}
/>

当facilityId或specializationId变化时，key值改变，组件会重新初始化，自然清空选中状态。

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