React Hook Form问题：编辑模式下无法用setValue清空预填州字段

我有一个包含国家和州的表单，选择国家后会显示对应州的下拉列表。切换国家时我尝试把州字段值设为null，让用户选择新的州，这个操作在创建模式下正常，但在编辑模式（表单已预填保存的数据）中，设置州为null后仍显示预填值。

相关代码：

// set default values of form fields in edit mode
const handleSetValue = (card: PaymentCard) => {
  reset({
    cardHolder: card.name,
    city: card.city ?? '',
    addressLine1: card.addressLine1 ?? '',
    addressLine2: card.addressLine2,
    postCode: card.addressZip ?? '',
    isDefault: card.isDefault,
    expiryDate: `${card.expMonth}/${card.expYear}`,
    cardNumber: `**** ${card.last4}`,
  });
  const defaultCountry = APP_COUNTRY_STATES.find(
    item => item.countryShortCode === card.country
  );
  if (defaultCountry) {
    const {countryName, countryShortCode} = defaultCountry;
    setValue('country', {value: countryShortCode, label: countryName});
    setIsInitialSetup(true);
    if (!COUNTRY_WITH_NO_STATES.includes(countryName)) {
      // show state dropdown
      setShowRegion(true);
      // set the regions of selected country
      setRegions(
        defaultCountry.regions.map(item => ({
          label: item.name,
          value: item.name,
        }))
      );
      const defaultState = defaultCountry.regions.find(
        where => where.name === card.state
      );
      if (defaultState) {
        const {name} = defaultState;
        setValue('state', {label: name, value: name}); // issue seems to be coming from here
       
      }
    } else {
      setShowRegion(false);
      setRegions([]);
    }
  }
};

// set form fields on open of edit modal
useEffect(() => {
  if (selectedCard) {
    handleSetValue(selectedCard);
  } else {
    resetFormField();
  }
}, [selectedCard]);

// handle country changes
const handleCountryChange = (name: string) => {
  // set state to undefined
  setValue('state', null);
  // find the country in the list of country lists
  const countryStates = APP_COUNTRY_STATES.find(
    where => where.countryName === name
  );
  if (!countryStates) {
    setShowRegion(false);
    setRegions([]);
    return;
  }
  // check if the country does not states
  if (!COUNTRY_WITH_NO_STATES.includes(countryStates.countryName)) {
    setShowRegion(true);
    // set the regions of selected country
    setRegions(
      countryStates.regions.map(item => ({
        label: item.name,
        value: item.name,
      }))
    );
  } else {
    setShowRegion(false);
    setRegions([]);
  }
};

// set regions for countries with regions
useEffect(() => {
  if (countryWatch && !isInitialSetup) {
    handleCountryChange(countryWatch.label);
  } else {
    setIsInitialSetup(false);
  }
}, [countryWatch]);

1. 表单状态更新不彻底 #

如果使用的是react-hook-form，单独调用setValue('state', null)可能无法完全覆盖编辑模式下预填的state值。可以改用reset方法单独重置state字段，确保表单状态被正确更新：

// 替换handleCountryChange中的setValue('state', null)
reset({ state: null }, { keepValues: true });

keepValues: true会保留其他字段的现有值，仅重置state字段。

2. 初始化逻辑的时序问题 #

isInitialSetup的切换逻辑可能导致第一次切换国家时，handleCountryChange未被正确触发。调整监听countryWatch的useEffect逻辑：

useEffect(() => {
  if (countryWatch) {
    if (!isInitialSetup) {
      handleCountryChange(countryWatch.label);
    } else {
      // 初始化完成后立即切换标记，避免后续逻辑阻塞
      setIsInitialSetup(false);
    }
  }
}, [countryWatch]);

3. 统一表单初始化方式 #

当前handleSetValue中，reset方法未包含state字段，而是单独用setValue设置，导致表单状态来源不一致。将state字段加入reset的初始值中：

reset({
  cardHolder: card.name,
  city: card.city ?? '',
  addressLine1: card.addressLine1 ?? '',
  addressLine2: card.addressLine2,
  postCode: card.addressZip ?? '',
  isDefault: card.isDefault,
  expiryDate: `${card.expMonth}/${card.expYear}`,
  cardNumber: `**** ${card.last4}`,
  // 统一初始化state字段
  state: defaultState ? { label: defaultState.name, value: defaultState.name } : null
});

这样表单的state状态从一开始就由reset管理，后续更新时更稳定。

4. 确保下拉列表与表单状态同步 #

如果州的下拉列表是受控组件，需确保其选中值完全绑定到表单的state值，避免本地状态干扰：

<Select
  name="state"
  value={watch('state') || null}
  options={regions}
  // 其他属性
/>

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