Блог

Я просто пытаюсь удалить элемент на своей странице. Когда я удаляю элемент, я получаю это необработанное отклонение (TypeError): state.recipes — неопределенное сообщение, указывающее на мой редуктор. Когда я обновляю свою страницу, объект исчезает, и ошибка исчезает. Вопрос в том, что вызывает эту ошибку до удаления элемента?

Это то, что происходит после того, как я нажимаю кнопку удаления, когда я обновляю страницу, объект исчезает.

  case 'DELETING_RECIPE_START': 
            return {
            ...state.recipes, 
            loading: true 
            }

        case 'DELETE_RECIPE_SUCCESS':
            
This line ----->  const recipes = state.recipes.filter(recipe => recipe.id !== action.payload.recipeId)
            
            return {
                ...state, recipes,
               loading: false
            
            }
 

Мне сказали, что в этом случае нужно проверить ваше действие удаления на серверной части. Когда я подключил byebug, он показывает мне, какой объект я пытаюсь удалить, так что, надеюсь, мне не о чем беспокоиться.

 def destroy
      
        recipe = Recipe.find(params[:id])
        
        unless recipe.nil?
      
          recipe.destroy
          render json: recipe
        else
          render json: { error: "Property not found" }, status: 404
        end
    end
    
 

Я изменил свое действие удаления в соответствии с асинхронными соглашениями thunk, и я надеюсь, что оно структурировано правильно. Я отмечу, что когда я запускаю отладчик перед возвратом (отправкой), эта проблема с моей ошибкой, похоже, возникает после строки возврата (отправки).

 export const deleteRecipe = (recipeId) =>{
    const BASE_URL = `http://localhost:3001`
    const RECIPES_URL =`${BASE_URL}/recipes`
    debugger
    return (dispatch) => {
        
        dispatch({ type: "DELETING_RECIPE_START" })
        fetch(`${RECIPES_URL}/${recipeId}`,{method: 'DELETE'})
          .then(response =>{return response.json()})
          .then(recipeId =>  dispatch({ type: 'DELETE_RECIPE_SUCCESS', payload: recipeId }))
          .catch((error) => console.log.error(error))
    };

}
 

Последний здесь мой компонент рецепта с кнопкой удаления и связанным с ним обработчиком событий.

 class Recipe extends Component {
   
    handleOnClick(){
        this.props.deleteRecipe(this.props.recipe.id);
      }

    render(){
        
        return(
            <div>
            <h3>Name: {this.props.recipe.name}</h3>
            <p>Category:{this.props.recipe.category_id}</p>
            <p>Chef Name: {this.props.recipe.chef_name}</p>
            <p>Origin: {this.props.recipe.origin}</p>
            <p>Ingredients: {this.props.recipe.ingredients}</p>
            <button onClick={()=>this.handleOnClick()}>Delete</button>
            </div>
             
        )
    }

}

export default Recipe
 

Что я могу сделать, чтобы исправить это?

Для тех, кто заинтересован в решении. Я отдаю должное моему лидеру группы за это. Произошла некоторая реструктуризация.

Когда отладчик помещается в my, это будет указывать на то, что ключ не предоставлен для рецептов…ну вот что это означало.

Сначала мой случай DELETE_RECIPE_START был таким

 case 'DELETING_RECIPE_START': 
            return {
            
            ...state.recipes, 
            loading: true 
            }
 

Это должно было выглядеть так

 case 'DELETING_RECIPE_START': 
            return {
            
            recipe:[...state.recipes], 
            loading: true 
            }
 

Рецепт является ключом, а его текущее состояние — значением

Следующая часть поразила меня…Действие удаления не нуждалось в ответе json. Вы только указываете ему удалить идентификатор, и все.

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

    
   
    return (dispatch) => {
        fetch(`${RECIPES_URL}/${recipeId}`, { method: 'DELETE' })
            .then(() => {
                return dispatch({ type: 'DELETE_RECIPE_SUCCESS', payload: recipeId })
            });
    };

}
 

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