React JS使用FormData传对象数组时.NET Core 5.0后端接收为null问题

问题修复方案 #

1. 修复axios请求头配置

你当前的请求头手动设置了multipart/form-data类型和固定boundary，这是核心错误之一。axios发送FormData类型的请求时，会自动生成正确的Content-Type头和动态边界值，手动覆盖会导致后端无法拆分表单字段。直接删掉AddSurveyFormAnswersUrl函数里的ContentType配置项即可。

2. 按照.NET Core模型绑定规则拼接FormData

.NET Core对form-data格式的对象数组有固定的字段命名规则：数组参数名[索引].属性名，你之前的两种拼接方式都不符合规则，导致后端无法绑定参数值。
正确的前端拼接代码如下：

const surveyFormAnswers = [
  {Answer: "Hello", QuestionId: 1}, 
  {Answer: "Document", QuestionId: 2, File: fileObject}
];
const data = new FormData();

surveyFormAnswers.forEach((item, index) => {
  const fieldPrefix = `SurveyFormAnswersDtos[${index}]`;
  Object.entries(item).forEach(([fieldKey, fieldValue]) => {
    data.append(`${fieldPrefix}.${fieldKey}`, fieldValue);
  })
})

await executeAddSurveyFormAnswers({data: data});

3. 确认后端接口配置

请确保后端接口满足以下要求：

• 接收参数添加[FromForm]注解，指定从表单数据中绑定值
• 接收参数的结构和前端字段命名匹配，示例如下：

public class SurveyFormAnswerDto
{
    public string Answer { get; set; }
    public int QuestionId { get; set; }
    public IFormFile File { get; set; }
}

[HttpPost]
public IActionResult AddSurveyAnswers([FromForm] List<SurveyFormAnswerDto> SurveyFormAnswersDtos)
{
    // 此处即可正常获取到传入的答案数组
}

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