Rails/React 不允许的参数

Question

I have been tackling this issue for the past few days. I keep getting the error below regarding unpermitted parameters:

Parameters: {"category_id"=>6, "name"=>"", "ingredients"=>"", "chef_name"=>"", "origin"=>"", "recipe"=>{"name"=>"", "ingredients"=>"", "chef_name"=>"", "origin"=>"", "category_id"=>6}}
Unpermitted parameter: :recipe
   (0.1ms)  begin transaction
  ↳ app/controllers/recipes_controller.rb:19:in `create'

As you notice, it keeps making a recipe within a recipe hence ':recipe' being a unpermitted parameter.It's basically injecting an extra parameter called recipe somewhere and I don't know how to find this one.

Here is my create action in my recipe controller since I am trying to create a recipe

def create
        recipe = Recipe.create(recipe_params)
        if recipe.save
            render json: recipe
        else
            render json: { error: "Couldn't save" }
        end
    end
    
    private

    def recipe_params
        params.permit(:category_id,:name,:ingredients,:chef_name,:origin,category:[:id,:category])
    end

and here is my post action that is sending the request to the rails api

export const postRecipes = (recipe)=>{
    const BASE_URL = `http://localhost:10524`
    const RECIPES_URL =`${BASE_URL}/recipes`

    
    const config = {
        method: "POST",
        body:JSON.stringify(recipe),
        headers: {
        "Accept": "application/json",
        "Content-type": "application/json"
     }
    }

   
    //category field
    return(dispatch)=>{
    fetch(RECIPES_URL,config)
    .then(response => response.json())
    .then(resp => {
        dispatch({
            type: 'Add_Recipe',
            payload:{
                
                name: resp.name,
                ingredients: resp.ingredients,
                chef_name: resp.chef_name,
                origin: resp.origin,
                category: resp.category
            
            }
        })
    })
    
      .catch((error) => console.log.error(error))

    }
    
    
}

Here is my reducer for adding recipes

export default function manageRecipes(state={
    recipes:[],
    category_id:[],
}, action){


    switch(action.type){
        case 'Add_Recipe':
            const recipe = {
                
                name: action.name,
                ingredients: action.ingredients,
                chef_name: action.chef_name,
                origin: action.origin,
                category: action.category
                
            }

            return{
                ...state,
                recipes: [...state.recipes, recipe],
            }

       default:
            return state
        
    }
}

Is anyone able to help spot how this happens?

Answer 1

Try adding :recipe in params.permit or params.require(:recipe).permit(...your_other_code)

Credit to Dcangulo