React JS中嵌套数据模型的多输入表单状态处理方案咨询

方案一：升级handleChange支持路径解析 #

你可以把输入框的name属性设置为嵌套路径的点分隔形式（比如address.street），然后修改handleChange函数来解析这个路径，逐层更新嵌套对象，同时保持状态的不可变性。

代码示例：

const handleChange = (e) => {
  const { name, value } = e.target;
  // 拆分路径为数组，比如"address.street"变成["address", "street"]
  const pathSegments = name.split('.');
  
  setClient(prev => {
    // 迭代更新嵌套属性，避免直接修改原对象
    const updated = { ...prev };
    let current = updated;
    
    // 遍历到倒数第二个节点，逐层拷贝嵌套对象
    for (let i = 0; i < pathSegments.length - 1; i++) {
      const key = pathSegments[i];
      current[key] = { ...current[key] };
      current = current[key];
    }
    
    // 设置最后一个节点的值
    const finalKey = pathSegments[pathSegments.length - 1];
    current[finalKey] = value;
    
    return updated;
  });
};

对应的输入框写法：

<input
  type="text"
  name="address.street"
  value={client.address.street}
  onChange={handleChange}
  placeholder="街道"
/>
<input
  type="text"
  name="contact.email"
  value={client.contact.email}
  onChange={handleChange}
  placeholder="联系邮箱"
/>

这种方式不用改太多现有代码，未来扩展新的嵌套字段时，只需要给输入框设置对应的点分隔name即可，灵活性拉满。

方案二：使用useReducer管理复杂状态 #

如果未来表单结构会更复杂，用useReducer会比零散的setState更清晰——所有状态更新逻辑都集中在reducer函数里，便于维护和扩展。

代码示例：
首先定义reducer函数：

const clientReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD': {
      const { path, value } = action.payload;
      const pathSegments = path.split('.');
      const updated = { ...state };
      let current = updated;
      
      for (let i = 0; i < pathSegments.length - 1; i++) {
        const key = pathSegments[i];
        current[key] = { ...current[key] };
        current = current[key];
      }
      
      current[pathSegments[pathSegments.length - 1]] = value;
      return updated;
    }
    // 未来可以添加其他更新逻辑，比如重置表单
    case 'RESET_FORM':
      return {
        name: "",
        code: "",
        address: { street: "", neighbourhood: "", city: "" },
        contact: { name: "", email: "", number: "" }
      };
    default:
      return state;
  }
};

然后在组件中使用：

const [client, dispatch] = useReducer(clientReducer, {
  name: "",
  code: "",
  address: { street: "", neighbourhood: "", city: "" },
  contact: { name: "", email: "", number: "" }
});

const handleChange = (e) => {
  const { name, value } = e.target;
  dispatch({
    type: 'UPDATE_FIELD',
    payload: { path: name, value }
  });
};

输入框的写法和方案一完全一致，只是把setClient换成了dispatch。后续如果需要添加批量修改、表单重置等逻辑，直接在reducer里加case就行，状态管理更有条理。

注意事项 #

• 不管用哪种方案，都要保证状态不可变性——绝对不能直接修改prev或者state里的嵌套对象，必须通过浅拷贝（...扩展运算符）创建新对象，否则React可能检测不到状态变化，导致组件不重新渲染。
• 如果嵌套层级特别深，也可以用第三方工具函数简化路径更新，但如果不想引入依赖，自己写迭代逻辑也足够用。

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