React中动态增删输入框并同步值到主状态数组遇表单消失问题

先梳理你代码里的核心问题，逐个修复就能解决表单消失和数据提交异常的问题：

1. 修正函数名不匹配问题 #

你渲染代码里调用的removeLink、addInput，和实际定义的handleRemoveLink、handleAddInputField函数名不一致，直接导致增删逻辑失效，先把名字对齐：

• 删除按钮的onClick={() => removeLink(input.id)}改为onClick={() => handleRemoveLink(input.id)}
• 添加按钮的onClick={() => addInput()}改为onClick={() => handleAddInputField()}

2. 实现onChangeLink函数，正确更新输入内容 #

你代码里用了onChangeLink但没定义，这会导致输入时状态无法同步，引发组件异常。补上这个函数：

const onChangeLink = (updatedInput) => {
  setLinkInput(linkInput.map(item => 
    item.id === updatedInput.id ? updatedInput : item
  ));
};

这个函数会定位到对应ID的输入项，更新它的link值，保证输入内容能正常显示和保存。

3. 修复表单提交逻辑，阻止页面刷新 #

表单提交默认会触发页面刷新，这就是你看到表单消失的原因。需要在提交函数里阻止默认行为，同时把输入的链接同步到gallery的image_url数组：

const handleSubmit = (e) => {
  e.preventDefault(); // 阻止页面刷新
  // 提取所有输入的链接，可按需过滤空值
  const imageUrls = linkInput.map(item => item.link).filter(url => url.trim() !== "");
  // 更新gallery状态
  setGallery(prev => ({
    ...prev,
    image_url: imageUrls
  }));
  // 这里可以添加提交成功后的逻辑，比如提示或重置表单
};

记得给你的<form>标签加上onSubmit={handleSubmit}属性。

4. 修正输入框ID重复问题 #

多个输入框用同一个id="image_url"不符合HTML规范，改成动态生成的唯一ID：

<input
  className="form-control"
  id={`image_url-${input.id}`} // 动态生成唯一ID
  type="text"
  value={input.link}
  required
  onChange={(e) => onChangeLink({ ...input, link: e.target.value })}
/>

完成以上修改后，输入时表单不会再消失，提交按钮也能正确把所有图片链接存入gallery.image_url数组。

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