React前端数据传递问题：如何正确传递多对象数组至后端

问题根源 #

1. 对象属性访问错误：你写的inputField["subItem","availability","price"]是无效写法——JavaScript的逗号操作符会返回最后一个表达式的值，所以这行代码实际只取了inputField.price，导致names数组里全是每个项的price值。
2. 数据结构构建错误：你手动创建sItem数组时，把整个names数组转成字符串赋值给每个属性，自然所有属性值完全重复；而且手动留空对象也没有意义，根本没实现遍历生成每个独立对象的逻辑。

修正后的代码 #

const onSubmit = () => {
  // 遍历inputFields，为每个项生成后端需要的结构
  const sItem = inputFields.map(inputField => ({
    subItem: inputField.subItem,
    qty: inputField.availability, // 注意：你提到后端需要qty字段，这里对应你代码里的availability，若字段名不符请自行调整
    price: inputField.price
  }));

  const data = { sItem };

  // 打印验证数据结构
  console.log(data);
  // 这里添加传递给后端的逻辑，比如fetch/axios请求
};

说明 #

• 直接用map遍历inputFields，每个项对应生成一个包含subItem、qty（或你实际的字段名）、price的对象，最终这个map结果就是后端需要的sItem数组。
• 修正后每个对象的属性值会对应到原inputFields里每个项的独立值，不会再出现重复问题。

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