React 中如何处理带嵌套数量与动态表单字段的复杂数据结构_技术教程

本文讲解在 react（next.js）中如何高效渲染按数量重复的嵌套数据（如多份相同 package），并为每一份独立生成可编辑、状态隔离的用户输入字段（如问题回答），避免 id 冲突与状态混淆。

在构建表单密集型应用（如订单配置、问卷化商品定制）时，常遇到类似如下结构的后端响应：

const response = {
  item1: 'someItem',
  item2: 'someitem2',
  packages: [
    { packageName: 'packageA', quantity: 3 },
    { packageName: 'packageB', quantity: 1 },
    { packageName: 'packageC', quantity: 2 }
  ],
  questions: [
    { question: 'question1' },
    { question: 'question2' },
    { question: 'question3' }
  ]
};

注意：原始问题中 JSON 存在语法错误（packages 数组内误嵌 questions），实际应为顶层平级字段——即 questions 是所有 package 共享的问题模板列表，而非每个 package 独有。我们按此合理结构展开。

✅ 核心挑战与设计原则

❌ 不推荐：先 flatten packages（如用 for 循环推入 3×A、1×B…），再单独 flatten questions，最后靠索引硬绑定 → 易错、不可维护、无法支持增删改。
✅ 推荐：以“逻辑实例”为单位建模状态。每个 package × quantity 实例应视为一个独立可编辑单元，其内部包含完整的问题-答案对集合。

? 推荐状态结构（TypeScript）

interface QuestionItem {
  id: string; // 唯一标识，用于 key 和字段路径
  question: string;
  answer: string;
}

interface PackageInstance {
  id: string;           // 包实例唯一 ID（如 `pkg-A-0`, `pkg-A-1`）
  packageName: string;  // 来源包名
  questions: QuestionItem[];
}

// 最终状态：所有待填写的 package 实例数组
const [packageInstances, setPackageInstances] = useState([]);

? 初始化：按 quantity 展开为独立实例 + 关联问题

useEffect(() => {
  if (!response?.packages || !response.questions) return;

  const instances: PackageInstance[] = [];

  response.packages.forEach(pkg => {
    for (let i = 0; i < pkg.quantity; i++) {
      const instanceId = `${pkg.packageName}-${i}`;
      const questions = response.questions.map((q, idx) => ({
        id: `${instanceId}-q-${idx}`, // 全局唯一，如 `packageA-0-q-0`
        question: q.question,
        answer: ''
      }));

      instances.push({
        id: instanceId,
        packageName: pkg.packageName,
        questions
      });
    }
  });

  setPackageInstances(instances);
}, [response]);

?️ 渲染：为每个实例渲染完整问答区块

return (
  
    {packageInstances.map((pkgInst) => (
      
        {pkgInst.packageName}（第 {parseInt(pkgInst.id.split('-').pop() || '0') + 1} 份）

        {pkgInst.questions.map((q) => (
          
            {q.question}
             {
                setPackageInstances(prev =>
                  prev.map(p =>
                    p.id === pkgInst.id
                      ? {
                          ...p,
                          questions: p.questions.map(qt =>
                            qt.id === q.id ? { ...qt, answer: e.target.value } : qt
                          )
                        }
                      : p
                  )
                );
              }}
              // ✅ 关键：name 属性可用于 Formik/Yup 验证（见下文）
              name={`${pkgInst.id}.questions.${q.id}.answer`}
            />
          
        ))}
      
    ))}
  
);

⚙️ 进阶建议：使用 Formik + FieldArray（推荐生产环境）

若表单复杂度上升（需验证、提交、重置、动态增删题），强烈推荐 Formik 结合 FieldArray：

import { Form, Field, FieldArray, useFormikContext } from 'formik';

// 初始值示例（由上面逻辑生成）
const initialValues = {
  packages: packageInstances.map(pkg => ({
    id: pkg.id,
    packageName: pkg.packageName,
    questions: pkg.questions.map(q => ({ id: q.id, question: q.question, answer: q.answer }))
  }))
};

// 表单组件内

  {({ push, remove }) => (
    
      {values.packages.map((pkg, pkgIdx) => (
        
          {pkg.packageName}

          
            {({ push: pushQ, remove: removeQ }) => (
              
                {pkg.questions.map((q, qIdx) => (
                  
                    
                  
                ))}
                
              
            )}
          
        
      ))}
    
  )}