React Hooks中如何为嵌套对象状态设置数组类型值

核心问题说明 #

你现有代码存在两个明显错误：

• formData.contact 定义为数组类型，但更新时错误使用对象结构包裹
• 把联系人列表的同步逻辑混在普通通用字段的handleOnChange事件中，会导致输入通用字段时覆盖已追加的联系人数据

正确实现方式 #

方案1：监听inputFields变化自动同步（推荐） #

因为inputFields的数据结构和formData.contact要求的结构完全匹配，不需要额外格式转换，直接监听inputFields变化自动同步到formData即可，逻辑解耦不容易出错：

import { useState, useEffect } from 'react'

// 父组件内原有状态保持不变
const [inputFields, setInputFields] = useState([]);

const initialFormData = {
  general: {
    country: "",
    zip: "", 
  },
  contact: [
    {
      fullName: "",
      jobTitle: "",
      businessPhone: "",
      mail: "",
    },
  ],
};
const [formData, setFormData] = useState(initialFormData);

// 新增：监听inputFields变化，自动同步到formData.contact
useEffect(() => {
  setFormData(prevFormData => ({
    ...prevFormData,
    contact: [...inputFields] // 直接赋值数组，不要加对象包裹
  }))
}, [inputFields])

// 修正通用字段的onChange处理，移除错误的contact赋值逻辑
const handleOnChange = (e) => {
  const { name, value } = e.target;
  setFormData(prevFormData => ({
    ...prevFormData,
    general: {
      ...prevFormData.general,
      [name]: value,
    },
  }));
};

子组件原有的handleAddFields逻辑不需要修改，只要父组件监听了inputFields变化，点击"+"按钮追加新项后会自动同步到提交用的formData中。

方案2：新增字段时手动同步 #

如果不想用useEffect监听，也可以直接修改追加字段的逻辑，在更新inputFields的同时同步更新formData：

const handleAddFields = () => {
  // 构造新的联系人项，加空值兜底避免undefined
  const newContactItem = {
    fullName: crtContact?.fullName ?? "",
    jobTitle: crtContact?.jobTitle ?? "",
    businessPhone: crtContact?.businessPhone ?? "",
    mail: crtContact?.mail ?? "",
  }
  // 生成更新后的inputFields数组
  const updatedInputFields = [...inputFields, newContactItem]
  // 同步更新两个状态
  setInputFields(updatedInputFields)
  setFormData(prevFormData => ({
    ...prevFormData,
    contact: updatedInputFields
  }))
};

避坑提示 #

• 不要给数组类型的contact字段赋值对象，否则后续提交、遍历渲染时会报类型错误
• 更新状态时优先使用函数式更新（比如setFormData(prev => {})），避免闭包导致拿到旧的状态值
• 从选中项取值时建议加空值兜底，避免未选中时字段值为undefined导致表单校验失败

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