如何从React向Ruby on Rails API正确提交多组数据？

问题核心 #

提交单个元素时API正常工作，但提交整个选中数据数组时返回400错误，核心原因是Rails的强参数未配置为接收数组格式的参数，且前端提交的数据结构需与Rails期望的嵌套参数格式匹配。

关键代码示例（基于常见场景补充） #

React提交代码示例 #

// 假设选中的数组为selectedItems
const submitData = async () => {
  try {
    const response = await fetch('/api/items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
      },
      body: JSON.stringify({ items: selectedItems }) // 需嵌套在指定键下
    });
    if (!response.ok) throw new Error('提交失败');
  } catch (err) {
    console.error(err);
  }
};

前端提交的数据格式示例 #

{
  "items": [
    { "name": "Item 1", "value": "100" },
    { "name": "Item 2", "value": "200" }
  ]
}

原Rails控制器错误版本 #

class ItemsController < ApplicationController
  def create
    @item = Item.new(item_params)
    if @item.save
      render json: @item, status: :created
    else
      render json: @item.errors, status: :unprocessable_entity
    end
  end

  private
  def item_params
    params.require(:item).permit(:name, :value) # 仅支持单个对象，不兼容数组
  end
end

解决方法：修改强参数与控制器逻辑 #

1. 调整强参数以支持数组 #

Rails强参数默认仅处理单个对象，需配置为接收数组并解析其中的属性：

private
def item_params
  # 解析数组内每个对象的允许属性
  params.require(:items).map do |item_data|
    ActionController::Parameters.new(item_data).permit(:name, :value)
  end
end

2. 修改create方法支持批量创建 #

原逻辑仅处理单个记录，需改为批量创建并校验结果：

def create
  @items = Item.create(item_params)
  # 检查所有记录是否保存成功
  if @items.all?(&:persisted?)
    render json: @items, status: :created
  else
    # 收集所有错误信息返回
    errors = @items.filter_map { |item| item.errors.full_messages unless item.persisted? }.flatten
    render json: { errors: errors }, status: :unprocessable_entity
  end
end

额外注意事项 #

• 前端必须将数组嵌套在指定键（如items）下提交，不能直接传裸数组，否则Rails的params.require会因找不到对应键返回400错误。
• 若模型存在关联关系，需在强参数中添加对应关联属性（如belongs_to :category则需补充:category_id）。
• 确保Rails路由已配置正确的POST路由，比如resources :items会自动生成POST /items路由。

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