React动态表单字段无法通过API端点保存至数据库问题求助

1. 解决"Uncaught ReferenceError: data is not defined"错误 #

这是语法错误导致的：你在fetch的then回调里把箭头函数的=>写成了=，导致data变量未被正确声明。

修正后的fetch回调代码：

.then(response => response.json())
.then(data => console.log(data)) // 把=替换成=>
.catch(error => console.log(error))

2. 修复动态字段无法入库的核心问题 #

你的inputField是一个数组（支持多组车辆字段的添加/删除），但你在handleSubmit里错误地直接访问inputField.vin这类属性——数组本身没有这些属性，你需要提交整个数组，或者按照后端接口要求的格式包装数据。

修正handleSubmit逻辑 #

如果后端接口接收包含车辆列表的对象（比如字段名为vehicles），修改如下：

const handleSubmit = (e) => {
  e.preventDefault()
  // 按照后端要求包装数组数据
  const postData = {
    vehicles: inputField
  }
  fetch('http://127.0.0.1:8000/api/post/', {
    method: 'POST',
    headers: {
      "Content-type": "application/json"
    },
    body: JSON.stringify(postData)
  }).then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))
}

如果后端直接支持接收数组格式的请求体，直接把inputField作为body即可：

body: JSON.stringify(inputField)

额外优化：避免变量名冲突 #

你的JSXmap循环里，参数名和状态变量名重复了（inputField.map((inputField, index) =>），虽然当前能运行，但容易混淆，建议修改参数名：

{inputField.map((vehicle, index) => (
  <div key={index} className="card-body">
    // 所有inputField.xxx替换为vehicle.xxx
    <input 
      type="text" 
      id="inputVin" 
      value={vehicle.vin}
      placeholder="Vin Number" 
      className="form-control" 
      name="vin"
      onChange={event => handleChangeInput(index, event)}
    />
    // 其余表单字段同理替换
  </div>
))}

最后请确认后端接口已配置为支持接收数组格式的请求数据，若后端原本只处理单个车辆对象，需要同步修改后端逻辑支持批量创建。

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