React传至Node的FormData中JSON数组对象的访问方法

问题原因 #

直接将数组对象附加到FormData时，JavaScript会自动调用toString()方法，把数组转为"[object Object],[object Object],..."格式的字符串，导致后端拿到的是字符串而非可直接操作的数组对象。

解决方案一：前端转JSON字符串传递，后端解析 #

React前端修改代码

const formData = new FormData();
// 将数组对象转为JSON字符串后再附加
formData.append("user", JSON.stringify(user));
axios.post('http://localhost:5000/AddEmployee', formData);

Node.js后端处理代码

// 将后端收到的字符串解析为数组对象
const userArray = JSON.parse(req.body.user);
// 正常访问属性
let primary = userArray[1].primaryContact;
console.log(primary);

解决方案二：直接传递JSON（无文件上传场景更推荐） #

如果不需要上传文件，无需使用FormData，直接传递JSON格式数据更简便：

React前端代码

axios.post('http://localhost:5000/AddEmployee', { user: user }, {
  headers: {
    'Content-Type': 'application/json'
  }
});

Node.js后端配置

确保已启用JSON请求体解析中间件：

const express = require('express');
const app = express();

// 解析JSON格式的请求体
app.use(express.json());

app.post('/AddEmployee', (req, res) => {
  // 直接访问数组对象属性
  let primary = req.body.user[1].primaryContact;
  console.log(primary);
  // 后续业务处理
});

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