React Ant Design表单切换国家后如何重置省/州、城市选择框为默认值

问题根因 #

你遇到的问题核心是三点：

• Ant Design Form 中绑定了name属性的表单项，值是由Form实例内部托管的，切换国家时你只更新了省/市的选项列表，没有主动清空Form中存储的省、市字段值，所以选择框仍会展示旧值。
• 你自行维护的selectedState、selectedCity状态、以及城市列表filteredCity也没有同步重置，会导致后续选择逻辑出错。
• 你原来仅在初始化时给省/市列表加了--select--默认项，切换国家后新过滤的省列表没有加默认项，也会导致展示异常。

修改方案 #

1. 修改国家选择器的onChange逻辑 #

在国家切换时同步清空省、市的Form值和对应的状态，同时给新过滤的省列表加上默认选项：

<Select
  showSearch
  placeholder="Select country"
  loading={loading}
  onChange={(code) => {
    setSelectedCountry(Countries[code].name)
    // 清空省、市的Form值和对应状态
    setSelectedState(null)
    setSelectedCity(null)
    form.setFieldsValue({
      prvc: null,
      cty: null
    })
    // 重置城市列表为默认状态
    setFilteredCity([{ name: "--select--" }])
    // 过滤省列表并添加默认选项
    const newFilteredState = States.filter((state) => state.countryCode === Countries[code].isoCode)
    setFilteredState([{ name: "--select--" }, ...newFilteredState])
  }}
  // 其余原有属性保留不变
>
  {/* 原有Option逻辑不变 */}
</Select>

2. 修正初始化的useEffect逻辑 #

避免重复给列表叠加默认项：

useEffect(() => {
  const defaultOption = {
    name: "--select--"
  };
  // 直接用全局的States、Cities常量，不要用state里的filteredState、filteredCity
  setFilteredState([defaultOption, ...States])
  setFilteredCity([defaultOption, ...Cities])
}, []);

3. （可选优化）切换省时同步清空城市值 #

避免切换省后城市还保留旧国家/旧省的取值：

<Select
  showSearch
  loading={loading}
  placeholder="Select Province"
  onChange={(code) => {
    // 注意这里要用过滤后的filteredState取值，不能用全局States，索引不匹配会取错值
    const currentState = filteredState[code]
    setSelectedState(currentState.name)
    // 清空城市的Form值和对应状态
    setSelectedCity(null)
    form.setFieldsValue({
      cty: null
    })
    // 过滤城市列表并添加默认选项
    const newFilteredCity = Cities.filter((city) => 
      city.countryCode === currentState.countryCode && city.stateCode === currentState.isoCode
    )
    setFilteredCity([{ name: "--select--" }, ...newFilteredCity])
  }}
  // 其余原有属性保留不变
>
  {/* 原有Option逻辑不变 */}
</Select>

修改完成后切换国家时，省、市选择框就会自动清空为默认占位符状态，同时选项列表也会同步更新为对应国家/省的正确数据。

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