При удалении избранного из приложения 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;
}
};