Удаление состояния и получение новой задачи состояния

При удалении избранного из приложения React оно удаляет блюдо, но выдает ошибку

const favourites = props.favorites.favorites [0] .dishes.map ((блюдо), {.. TypeError: Невозможно прочесть свойство "блюда" неопределенного ...

после перезагрузки приложения показывает только оставшиеся не удаленные блюда (отлично работает)

в основном компоненте, передавая свойство "избранное" любимому компоненту как

<Favorites
  favorites={this.props.favorites}
  deleteFavorite={this.props.deleteFavorite}
/>

в любимом компоненте, проверяющем результат реквизита и передающем реквизиты компоненту меню рендеринга

if (props.favorites.favorites) {
  const favorites = props.favorites.favorites[0].dishes.map((dish) => {
    return (
      <div key={dish._id} className="col-12 mt-5">
        <RenderMenuItem dish={dish} deleteFavorite={props.deleteFavorite} />
      </div>
    );
  })

компонент меню рендеринга получает переданные выше реквизиты

function RenderMenuItem({ dish, deleteFavorite }) {
  return (
    <Media tag="li">
      <Media left middle>
        <Media object src={baseUrl + dish.image} alt={dish.name} />
      </Media>
      <Media body className="ml-5">
        <Media heading>{dish.name}</Media>
        <p>{dish.description}</p>
        <Button outline color="danger" onClick={() => deleteFavorite(dish._id)}>
           <span className="fa fa-times"></span>
        </Button>
      </Media>
    </Media>
  );
}

создатель действий для удаления избранного элемента

export const deleteFavorite = (dishId) => (dispatch) => {
const bearer = "Bearer " + localStorage.getItem("token");

return fetch(baseUrl + "favorites/" + dishId, {
  method: "DELETE",
  headers: {
    Authorization: bearer,
  },
  credentials: "same-origin",
 })
  .then(
    (response) => {
      if (response.ok) {
        return response;
      } else {
       var error = new Error(
         "Error " + response.status + ": " + response.statusText
       );
       error.response = response;
       throw error;
     }
   },
    (error) => {
      throw error;
    }
  )
   .then((response) => response.json())
   .then((favorites) => {
   // console.log("Favorite Deleted", favorites);
   dispatch(addFavorites(favorites));
  })
   .catch((error) => dispatch(favoritesFailed(error.message)));
};
     
export const favoritesLoading = () => ({
  type: ActionTypes.FAVORITES_LOADING,
}); 

export const favoritesFailed = (errmess) => ({
  type: ActionTypes.FAVORITES_FAILED,
  payload: errmess,
});

export const addFavorites = (favorites) => ({
  type: ActionTypes.ADD_FAVORITES,
  payload: favorites,
});

редуктор для избранного элемента

import * as ActionTypes from "./ActionTypes";

export const favorites = (
  state = {
    isLoading: true,
    errMess: null,
    favorites: null,
  },
  action
) => {
  switch (action.type) {
    case ActionTypes.ADD_FAVORITES:
      return {
        ...state,
        isLoading: false,
        errMess: null,
        favorites: action.payload,
      };

    case ActionTypes.FAVORITES_LOADING:
      return { ...state, isLoading: true, errMess: null, favorites: null };

    case ActionTypes.FAVORITES_FAILED:
      return {
        ...state,
        isLoading: false,
        errMess: action.payload,
        favorites: null,
      };

    default:
      return state;
  }
};

person Madhav Gautam    schedule 01.07.2020    source источник


Ответы (1)


Проверьте свой метод REST DELETE. Вероятно, он возвращает что-то отличное от массива (объект, возможно, удаленный, я полагаю).

Итак, после вызова этого DELETE вы используете его ответ и устанавливаете свой favorites в хранилище redux для этого ответа. Поскольку это не массив, в props.favorites.favorites[0] нет ничего определенного.

person lavor    schedule 01.07.2020