如何将React前端的嵌套对象传递至Ruby on Rails后端

完全不需要手动做JSON序列化+后端反序列化的冗余操作，Rails原生就支持嵌套参数自动解析，结合前端FormData构造请求即可，同时还能兼容结构里的文件上传字段，是最符合Rails生态惯例的做法。

React端处理逻辑 #

核心是按照Rails参数解析的命名规则构造FormData对象，发请求时不要手动设置Content-Type请求头，让浏览器自动识别multipart类型和边界值即可：

const submitData = async (payload) => {
  const formData = new FormData();

  // 构造第一层普通字段
  formData.append('library', payload.library);

  // 构造movie下的普通嵌套字段
  formData.append('movie[name]', payload.movie.name);
  formData.append('movie[year]', payload.movie.year);

  // 构造嵌套的文件数组，重复append同个带[]后缀的键，Rails会自动识别为数组
  payload.movie.screenshots.forEach(file => {
    formData.append('movie[screenshots][]', file);
  });

  return fetch('/api/movies', {
    method: 'POST',
    body: formData,
    // 注意：不要手动设置Content-Type头，否则会导致boundary缺失、文件上传失败
  });
}

// 调用示例
submitData({
  library: "favorite",
  movie: {
    name: "James Bond Skyfall",
    year: "2012",
    screenshots: [file1, file2],
  },
})

如果嵌套结构层级深、字段多，写个简单的递归遍历函数自动拼接键名即可，不需要引入额外依赖，逻辑也不复杂。

Rails端处理逻辑 #

不需要写任何自定义反序列化代码，Rails默认的参数中间件会自动把FormData的嵌套键解析成标准的Hash结构，直接按常规方式写强参数、处理业务逻辑就行：

class MoviesController < ApplicationController
  def create
    # 直接拿到的params结构和前端原始对象完全一致
    # params[:library] = "favorite"
    # params[:movie][:name] = "James Bond Skyfall"
    # params[:movie][:year] = "2012"
    # params[:movie][:screenshots] = 上传的文件对象数组
    safe_params = params.permit(
      :library,
      movie: [:name, :year, { screenshots: [] }]
    )

    # 正常写后续业务逻辑即可
    @movie = Movie.new(safe_params[:movie])
    @movie.save
  end
end

方案优势 #

• 没有额外的序列化/反序列化开销，全是框架和浏览器原生支持的标准能力
• 原生支持文件上传，不需要把文件转成base64等冗余格式，请求体积更小
• 完全符合Rails的参数约定，和普通表单提交的参数规则完全一致，维护成本低
• 不会出现JSON转义、特殊字符解析异常的问题

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