Блог

Я интегрирую функцию удаления как часть всей области CRUD, и я не могу удалить свою запись / объект, когда нажимаю Удалить рецепт. Кстати, для этого используются React-Redux и Rails.

Это пример того, что моя серверная консоль сообщает мне, когда я пытаюсь удалить свой рецепт / запись / объект во внешнем интерфейсе:

 ActiveRecord::RecordNotFound (Couldn't find Recipe with 'id'={:id=>"2"}):
  
app/controllers/recipes_controller.rb:10:in `show'
Started GET "/recipes/2" for 127.0.0.1 at 2021-01-19 21:22:51 -0600
Processing by RecipesController#show as */*
  Parameters: {"id"=>"2"}
  Recipe Load (0.1ms)  SELECT "recipes".* FROM "recipes" WHERE "recipes"."id" = ? LIMIT ?  [["id", nil], ["LIMIT", 1]]
  ↳ app/controllers/recipes_controller.rb:10:in `show'
Completed 404 Not Found in 1ms (ActiveRecord: 0.1ms | Allocations: 824)
 

Пока что вот мое действие удаления (удар):

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

    return (dispatch) => {
        
        fetch(`${RECIPES_URL}/${recipeId}`)
          .then(response =>{ return response.json()})
          .then(id => { return dispatch({ type: 'Delete_Recipe', id })});
         
          
      };
       
  }
 

Вот мой редуктор:

   case 'Delete_Recipe':
            return{
                recipes: state.recipes.filter(recipe => recipe.id !== action.payload)
            }
        
 

В моей консоли браузера я получаю следующее:

     
GET
    http://localhost:10524/recipes/1
Status404
Not Found
VersionHTTP/1.1
Transferred16.69 KB (16.37 KB size)
Referrer Policyno-referrer-when-downgrade
 

Примечание: Ниже здесь может быть не очень важно, но на всякий случай. В первую очередь я хотел показать поток данных до моих компонентов на случай, если возникнет вопрос

Вот где я импортировал действие deleteRecipe и сопоставил отправку с реквизитами

 class RecipesContainer extends Component{
    constructor(props){
        super(props)
    }

    componentDidMount(){
        this.props.getRecipes()
      }
    

    render(){
        return (
            <div>
               <RecipeInput postRecipes={this.props.postRecipes} /> 
               <RecipeList recipes={this.props.recipes} deleteRecipe={this.props.deleteRecipe}/>
            </div>
        )
    }

    

}

const mapStateToProps = state =>{
    return{
        recipes: state.recipes
    }
}


const mapDispatchToProps = dispatch =>{
    return{
    postRecipes: (recipe) => dispatch(postRecipes(recipe)),
    getRecipes: () => dispatch(getRecipes()),
    // getCategories: () => dispatch(getCategories())
    deleteRecipe: (id) => dispatch(deleteRecipe(id))
    }
}



export default connect(mapStateToProps,mapDispatchToProps)(RecipesContainer)
 

Вот мой компонент recipeList

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

class RecipeList extends Component {



render() {
   const { recipes } = this.props
   return (
    
      
    <div>
      
      {recipes.map(recipe =>  {return <Recipe recipe={recipe} {...recipe} deleteRecipe={this.props.deleteRecipe} key={recipe.id} />})}
    </div>
   )
    
  }
}

export default RecipeList;
 

И вот мой компонент рецепта

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

class RecipeList extends Component {



render() {
   const { recipes } = this.props
   return (
    
      
    <div>
      
      {recipes.map(recipe =>  {return <Recipe recipe={recipe} {...recipe} deleteRecipe={this.props.deleteRecipe} key={recipe.id} />})}
    </div>
   )
    
  }
}

export default RecipeList;
 

Кто может указать на мою проблему?

Ошибка из-за неправильного метода HTTP, поэтому запрос не отправляется для исправления действия контроллера Rails, запрос на удаление должен использовать DELETE метод, поэтому функция выборки должна быть:

 fetch(${RECIPES_URL}/${recipeId}, { method: 'DELETE' })