React函数组件动态嵌套表单数组状态更新问题求助

函数组件中所有状态都是不可变的，更新数组类型状态时不能直接修改原数组，必须返回一个全新的数组作为新状态，这是数组状态更新失败的核心原因。之前遇到的异步提交时数组没处理完就上传的问题，本质是多个state更新不同步导致的，优先把数组字段放进统一的表单state里管理，提交时不用额外拼接数据，能从根源避免这个问题。 #

第一步：修正初始状态定义 #

把食材数组直接放入统一的表单状态对象，和其他字符串字段一起管理：

const defaultFormFields = {
  title: '',
  imageUrl: '',
  leadText: '',
  ingredients: [] // 食材数组统一存在表单状态中
};

const NewRecipeForm = () => {
  const [formFields, setFormFields] = useState(defaultFormFields);
  const { title, imageUrl, leadText, ingredients } = formFields;
  // 移除单独的ingredients state，统一管理更不容易出现同步问题

第二步：实现三个核心操作逻辑 #

1. 食材输入变更处理 #

更新数组指定位置的值时，用map遍历原数组，匹配到当前编辑的下标时返回新输入值，其余项保持不变，最终返回全新数组更新状态：

const handleIngredientsChange = (index, event) => {
  setFormFields(prev => ({
    ...prev,
    ingredients: prev.ingredients.map((item, i) => {
      return i === index ? event.target.value.trim() : item
    })
  }))
}

这里用函数式更新prev => {}获取状态，能避免闭包导致的旧状态问题，不会出现更新丢失。

2. 新增食材项 #

直接展开原数组，末尾追加一个空字符串即可：

const addIngredient = () => {
  setFormFields(prev => ({
    ...prev,
    ingredients: [...prev.ingredients, '']
  }))
}

3. 删除食材项 #

用filter过滤掉对应下标的元素，返回过滤后的新数组：

const removeIngredient = (index) => {
  setFormFields(prev => ({
    ...prev,
    ingredients: prev.ingredients.filter((_, i) => i !== index)
  }))
}

第三步：修正表单提交逻辑 #

之前遇到的字符串拆分后提交不同步的问题，只要在提交函数里同步完成所有数据处理，再调用上传方法即可，另外加await等待上传完成再重置表单，避免数据还没发出去就被清空：

const createRecipe = async (event) => {
  event.preventDefault()
  // 如果要做逗号分隔字符串转数组，就在这里同步处理完再提交
  // 例：const submitData = {...formFields, tags: formFields.tagsStr.split(',').map(i => i.trim()).filter(Boolean)}
  await addRecipe('recipes', url, formFields)
  resetFormFields()
}

const resetFormFields = () => {
  setFormFields(defaultFormFields);
};

第四步：修正渲染部分的事件绑定 #

原代码里有几个绑定错误：title输入框的onChange写错了方法名、食材输入框的value取值和存储结构不匹配、删除按钮没有传当前下标、重复写了两个提交按钮，修正后的食材列表渲染部分：

<h1>Ingredients</h1>
{
  ingredients.map((ingredient, index) => {
    return (
      <div key={index}>
        <input 
          label='Ingredient' 
          placeholder='输入食材' 
          name='ingredient' 
          value={ingredient} 
          onChange={(e) => handleIngredientsChange(index, e)} 
        />
        <button type="button" onClick={() => removeIngredient(index)}>remove</button>
      </div>
    )
  })
}            
<button type="button" onClick={addIngredient}>add</button>

注意给非提交按钮加type="button"，避免点击时误触表单提交。最后只保留form标签上绑定的onSubmit={createRecipe}即可，把外面多余的提交按钮移到form标签内部，设为type="submit"就可以正常触发提交。

如果坚持要把ingredients作为单独的state管理，逻辑完全一致，只要把setFormFields替换成对应的setIngredients，更新时返回新数组就行。

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