0

从 React 应用程序中删除收藏夹时，它会删除这道菜，但会引发错误

const favorites = props.favorites.favorites[0].dishes.map((dish), {.. TypeError: Cannot read property 'dishes' of undefined ...

重新加载应用程序后，它只显示剩余的未删除菜肴（工作正常）

在主要组件中将道具“最喜欢”传递给最喜欢的组件

<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;
  }
};
4

1 回答 1

0

检查您的 REST DELETE 方法。它返回的可能与数组不同（我想是一个对象，可能是已删除的对象）。

因此，在调用此 DELETE 之后，您正在使用它的响应，并且您将favorites在 redux 存储中设置为此响应。因为它不是一个数组，所以没有定义在props.favorites.favorites[0].

于 2020-07-01T14:40:14.767 回答