React：表单提交后如何正确清空Select、TextField动态字段值

报错核心原因 #

调用setInputFields(null)后，inputFields从数组类型变为null，而null不存在map方法，渲染阶段执行inputFields.map会抛出类型错误，只要保证inputFields永远为数组类型即可避免该问题。

实现方案分两种常见场景： #

场景1：保留当前所有输入行，仅清空每行的字段值 #

第一步：先修正现有逻辑的隐藏缺陷

你当前的handleInputChange2存在逻辑问题：直接把Select的返回值赋值给整个输入项对象，会覆盖掉同一项的Quantity字段，修改为如下：

const handleInputChange2 = (index, event) => {
  const selectValue = event || { label: '', value: '' };
  const values = [...inputFields];
  // 仅更新foods字段，保留同项的其他字段
  values[index] = {
    ...values[index],
    foods: selectValue
  };
  setInputFields(values);
};

同时注意你初始状态定义的key是Food，但Select绑定的是inputField.foods，要保证key统一，建议初始状态调整为：

const [inputFields, setInputFields] = useState([
    { foods: '', Quantity: '' }
]);

第二步：提交时清空所有行的字段

在提交函数中执行如下逻辑：

const handleFormSubmit = () => {
  // 先执行你的表单提交逻辑
  // 清空所有输入行的字段
  const clearedInputFields = inputFields.map(item => ({
    foods: '',
    Quantity: ''
  }))
  setInputFields(clearedInputFields)
}

场景2：直接重置表单为初始状态（仅保留1行空输入） #

如果不需要保留已添加的输入行，直接重置到初始化状态即可：

const handleFormSubmit = () => {
  // 先执行你的表单提交逻辑
  // 重置为初始状态
  setInputFields([{ foods: '', Quantity: '' }])
}

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