Next.js动态渲染表单接收列表值异常问题咨询：点击添加重置输入、保存仅非动态字段入库

首先可以肯定的是，你的核心逻辑方向是对的——用状态数组管理动态表单条目，通过添加新对象来渲染新的表单行，这个思路完全没问题。现在遇到的两个问题都是细节处理不到位导致的，咱们一步步来解决：

问题1：点击ADD按钮后输入框被重置 #

这个问题的根源有两个：

• 表单控件缺少name属性：你的handleChange函数依赖e.target.name来更新对应字段，但所有动态行里的select和input都没设置name，导致e.target.name为空，根本没法正确更新formValues里的字段值。
• 误用defaultValue而非value：动态行的控件应该是受控组件，要用value绑定状态值，defaultValue只适合非受控组件的初始渲染，后续状态更新不会同步到控件上。

修复代码： #

先给每个动态控件加上对应的name，并把defaultValue改成value：

{formValues.map((element, index) =>(
  <div className={styles.left} key={index}>
    {/* 给select添加name="fishType"，用value绑定状态 */}
    <select 
      className={styles.d1} 
      name="fishType"
      value={element.fishType} 
      onChange={(e) => handleChange(index, e)}
    >
      <option value="">--选择鱼的种类--</option>
      <option value="Bluefin Tuna">Bluefin Tuna</option>
      <option value="Angelfish">Angelfish</option>
      <option value="Catfish">Catfish</option>
    </select>
    {/* 鱼类别select */}
    <select 
      className={styles.d2} 
      name="fishCategory"
      value={element.fishCategory} 
      onChange={(e) => handleChange(index, e)}
    >
      <option value="">--选择类别--</option>
      <option value="BFT1">BFT1</option>
      <option value="BFT2">BFT2</option>
      {/* 其他选项省略 */}
    </select>
    {/* 鱼等级select */}
    <select 
      className={styles.d3} 
      name="fishGrade"
      value={element.fishGrade} 
      onChange={(e) => handleChange(index, e)}
    >
      <option value="">--选择等级--</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
    {/* 数量input */}
    <input 
      className={styles.d4} 
      type="text" 
      name="nofBoxes"
      value={element.nofBoxes || ''} 
      onChange={(e) => handleChange(index, e)} 
    />
    {/* 位置select */}
    <select 
      className={styles.d5} 
      name="position"
      value={element.position} 
      onChange={(e) => handleChange(index, e)}
    >
      <option value="">--选择位置--</option>
      <option value="S1F1Sl1">S1F1Sl1</option>
      {/* 其他选项省略 */}
    </select>
  </div>
))}

同时，确保你的初始状态是一个包含空对象的数组（这样页面加载时就有一行空表单）：

const [formValues, setFormValues] = useState([
  { fishType: "", fishCategory: "", fishGrade: "", nofBoxes: "", position: "" }
]);

问题2：点击SAVE时仅部分字段存入数据库 #

这个问题是因为你的提交函数trawlingDetails没有把formValues（也就是后端需要的fishDetails数组）包含到提交的数据里。你需要把所有字段组装成后端要求的结构再提交。

修复提交函数： #

假设你的trawlingDetails是一个表单提交处理函数，修改它来组装完整的请求体：

const trawlingDetails = async (e) => {
  e.preventDefault();
  // 组装后端需要的数据结构
  const submitData = {
    trawlingNumber: trawlingNumber,
    trawlingDate: trawlingDate,
    totalVolume: totalVolume,
    fishDetails: formValues // 这里把动态表单的状态数组作为fishDetails传递
  };
  
  try {
    // 发送请求到后端，比如用fetch或者axios
    const res = await fetch('/api/your-endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(submitData),
    });
    // 处理响应逻辑
    if (res.ok) {
      alert('保存成功！');
      // 重置表单状态
      setTrawlingNumber('13AD');
      setTrawlingDate('17-03-2022');
      setTotalVolume('1000');
      setFormValues([{ fishType: "", fishCategory: "", fishGrade: "", nofBoxes: "", position: "" }]);
    }
  } catch (err) {
    console.error('保存失败:', err);
    alert('保存失败，请重试');
  }
};

额外优化建议 #

• 给handleChange函数加上更严谨的不可变更新逻辑，避免状态引用问题：

const handleChange = (i, e) => {
  const { name, value } = e.target;
  // 复制数组并更新对应条目，确保状态不可变
  const newFormValues = formValues.map((item, idx) => {
    if (idx === i) {
      return { ...item, [name]: value };
    }
    return item;
  });
  setFormValues(newFormValues);
};

• 给必填字段添加简单的校验，比如提交前检查fishDetails里的每个条目是否填写完整，避免提交空数据。

按上面的步骤修改后，你的动态表单应该就能正常添加条目，并且完整提交所有数据到后端了。

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