React useReducer条件dispatch实现地址自动填充提交值为空问题

你现在的实现只改了输入框的展示值，勾选「使用公司地址」时根本没把公司地址的内容同步到表单对应的状态里，提交时读状态自然是空值。
现有逻辑的问题点：

• 当useCompAddr为true时，输入框直接渲染companyAddress的对应字段，但这部分值从来没触发过onChange、也就没通过dispatch写入表单管理的state
• 只有手动点击输入框、修改内容触发onChange时，值才会同步到state，这就是为什么你手动点过输入框之后提交就能拿到值
• 你贴的reducer还有个笔误：switch判断写的是action.payload，但你传入的payload是字段值，字段名存在action.field里，判断条件完全写反了。

1. 勾选开关时批量同步地址字段到表单state #

在「使用公司地址」勾选框的切换事件里，加一步批量更新表单状态的逻辑，勾选时直接把公司地址的所有字段写入state：

// 勾选按钮的change处理函数
const handleToggleUseCompAddr = (checked) => {
  setUseCompAddr(checked)
  if (checked && companyAddress) {
    // 把所有地址字段一次性同步到表单state
    dispatch({
      field: 'batchUpdate',
      payload: {
        street: companyAddress.street,
        // 其余地址字段比如city、district、zipcode之类的在这里补全对应关系
      }
    })
  }
}

对应的reducer里要加批量更新的处理逻辑，你也可以拆成多个单字段的dispatch，批量写效率更高。

2. 修正reducer的判断错误 #

把reducer里switch的判断对象从action.payload改成action.field，修正后参考：

// 原代码这里写的switch(action.payload)是错误的
switch(action.field) {
  case "street":
  // 其余单字段的case逻辑
  case "batchUpdate":
    return {
      ...state,
      ...action.payload
    }
  default:
    return {
      ...state,
      [action.field]: action.payload
    }
}

3. 统一输入框的取值来源 #

等同步逻辑写完，输入框的value不用再写三目判断，直接绑定表单state里的值就行，保证展示值和提交值用的是同一份数据源：

<AdvancedInput
  name="street"
  type="text"
  value={state.street || ''}
  onChange={(e) =>
    dispatch({ field: "street", payload: e.target.value })
  }
/>

表单开发一定要保证数据源唯一：所有要提交的值都存在统一的表单state里，输入框只负责渲染state、触发onChange修改state，不要绕开state直接控制输入框展示内容，不然很容易出现“看着有值、提交为空”的问题。

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