Блог

У меня возникла проблема с отправкой моих данных из формы во внешнем интерфейсе. Каждый раз, когда я отправляю форму, я получаю недопустимый параметр: :рецепт

Мне сказали убедиться, что мои атрибуты в моем интерфейсе соответствуют тому, что было в сильных параметрах бэкэнда.

Вот что есть в моем контроллере для моего действия создания и моих сильных параметров

 class RecipesController < ApplicationController

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_attribute:[:category])
    end

end
 

И вот мой интерфейс React, в котором я ввожу информацию в форме
примечание я удалил обработчики событий для этого фрагмента кода, но оставил обработчик отправки, чтобы сократить это объяснение

 import React, { Component } from 'react'
import  Categories  from './Categories.js'



class RecipeInput extends Component{
    constructor(props){
        super(props)
        this.state = {
            category: [],
            categoryId: '',
            name:'',
            ingredients: '',
            chef_name: '',
            origin: ''
        }
        this.handleNameChange.bind(this)
        this.handleOriginChange.bind(this)
        this.handleChefChange.bind(this)
        this.handleIngChange.bind(this)


        
    }

    

    componentDidMount(){
        let initialCats = [];
        const BASE_URL = `http://localhost:10524`
        const CATEGOREIS_URL =`${BASE_URL}/categories`
        fetch(CATEGOREIS_URL)
        .then(resp => resp.json())
        .then(data => {
            
            initialCats = data.map((category) => {
                return category
            })
            console.log(initialCats)
                this.setState({
                    category: initialCats,
                })   
            });
    }

    
    handleSubmit = (event) =>{
        event.preventDefault();
        this.props.postRecipes(this.state)
        this.setState({
        categoryId: '',    
        name:'',
        ingredients: '',
        chef_name: '',
        origin: ''
     })
    }

    
        

    render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <Categories category={this.state.category}/>
                    <div>
                    <label for='name'>Recipe Name:</label>
                    <input type='text' value={this.state.name} onChange={this.handleNameChange} />
                    </div>
                    <div>
                    <label for='name'>Country Origin:</label>
                    <input type='text' value={this.state.origin} onChange={this.handleOriginChange} />
                    </div>
                    <div>
                    <label for='name'>Chef Name:</label>
                    <input type='text' value={this.state.chef_name} onChange={this.handleChefChange} />
                    </div>
                    <div>
                    <label for='name'>Ingredients:</label>
                    <textarea value={this.state.ingredients} onChange={this.handleIngChange} />
                    </div>
                    <input value='submit' type='submit'/>
                </form>
            </div>
        )
    }


}

export default RecipeInput
 

Я просто немного не понимаю, куда идти дальше. Правильно ли я сопоставляю атрибуты?

Редактировать Я забыл включить свою функцию postRecipes с моими отправками на месте

 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:{
                category:resp.category,
                name: resp.name,
                ingredients: resp.ingredients,
                chef_name: resp.chef_name,
                origin: resp.origin,
                categoryId: resp.categoryId 
            }
        })
    })
    //.then(response => <Recipe />)
      .catch((error) => console.log.error(error))

    }
    
    
}
 

Редактировать

Вот мой редуктор, который определяет мое действие добавления рецепта для полезной нагрузки.

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


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

            return{
                ...state,
                recipes: [...state.recipes, recipe],
            }
        case 'Delete_Recipe':
            const recipes = state.recipes.filter(recipe => recipe.id !== action.id)
            return {...state, recipes}
        
        case 'Add_Catagory':
            const cat = {
                name: action.name
            }    
            return{
                ...state,
                category: [...state.category, cat],
            }
        default:
            return state
        
    }
}
 

попробуйте сделать это в своем бэкэнде

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