Next.js嵌套React表单数据收集失败及组件显示异常求助

1. 嵌套demographic字段无法更新显示 #

问题根源 #

当前handleChange函数仅能处理顶层表单字段，对于demographic.target、demographic.gender这类嵌套属性，会在formData根节点新增字段，而非更新嵌套对象内的对应值，导致UI绑定的formData.demographic.xxx始终为空。

修复步骤 #

第一步：修改输入框的name属性

将嵌套字段的输入框name设置为路径格式，例如：

// Target输入框
<input
  type="text"
  name="demographic.target" // 改为路径格式
  id="target"
  value={formData.demographic.target}
  onChange={handleChange}
  className="block w-full border-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
  placeholder="e.g: Gen Z, Baby Boomers, Gen X"
/>

// Gender输入框同理
<input
  type="text"
  name="demographic.gender"
  id="gender"
  value={formData.demographic.gender}
  onChange={handleChange}
  className="block w-full border-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
  placeholder="E.g: 'Male' or 'Female' "
/>

第二步：重写handleChange函数，支持嵌套字段更新

const handleChange = (event) => {
  const { name, value } = event.target;
  const pathSegments = name.split('.');
  
  setFormData(prevFormData => {
    // 深拷贝原对象，避免直接修改状态
    const updatedForm = { ...prevFormData };
    let currentLevel = updatedForm;

    // 遍历路径，逐层创建新对象（保证不可变性）
    for (let i = 0; i < pathSegments.length - 1; i++) {
      const segment = pathSegments[i];
      currentLevel[segment] = { ...currentLevel[segment] };
      currentLevel = currentLevel[segment];
    }

    // 设置最终字段的值
    currentLevel[pathSegments[pathSegments.length - 1]] = value;
    return updatedForm;
  });
};

2. Yes/No选择组件无法正常显示 #

问题根源 #

• 定义了profession（Yes/No选项数组）但未使用，反而错误绑定了items数组；
• 使用了未定义的selectedItem状态变量，导致组件报错。

修复步骤 #

第一步：新增对应状态

// 在其他state定义处添加
const [selectedProfession, setSelectedProfession] = useState("");

第二步：修改选择组件，绑定正确的数据源与状态

<div className="relative inline-block text-left z-50 col-span-full">
  <select
    value={selectedProfession}
    onChange={(e) => setSelectedProfession(e.target.value)}
    // 如果需要同步到formData，添加name属性
    name="campaignReason"
  >
    <option value="" disabled>
      Select Yes/No
    </option>
    {profession.map((item, index) => (
      <option key={index} value={item}>
        {item}
      </option>
    ))}
  </select>
</div>

3. 地理选择数据未同步到formData #

当前国家/州/城市的选择仅存在于单独状态中，未同步到formData.demographic.geographic，需在选择变化时更新表单数据：

const handleCountryChange = (event) => {
  const value = event.target.value;
  setSelectedCountry(value);
  setSelectedState("");
  setSelectedCity("");

  // 同步更新formData
  setFormData(prev => ({
    ...prev,
    demographic: {
      ...prev.demographic,
      geographic: {
        ...prev.demographic.geographic,
        country: value,
        state: "",
        city: ""
      }
    }
  }));
};

const handleStateChange = (event) => {
  const value = event.target.value;
  setSelectedState(value);
  setSelectedCity("");

  setFormData(prev => ({
    ...prev,
    demographic: {
      ...prev.demographic,
      geographic: {
        ...prev.demographic.geographic,
        state: value,
        city: ""
      }
    }
  }));
};

const handleCityChange = (event) => {
  const value = event.target.value;
  setSelectedCity(value);

  setFormData(prev => ({
    ...prev,
    demographic: {
      ...prev.demographic,
      geographic: {
        ...prev.demographic.geographic,
        city: value
      }
    }
  }));
};

其他需补充的修复 #

• 导入缺失的React Hooks：import React, { useState, useEffect } from "react";
• 实现未定义的handleSubmit函数，例如：

const handleSubmit = (e) => {
  e.preventDefault();
  // 处理表单提交逻辑，比如API请求
  console.log(formData);
};

• Strategy部分的Select/SelectItem组件需导入对应库（如MUI），或替换为原生select组件，同时定义strategies数组。

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