TypeError: bookmarks.map不是一个函数

Question

我正在开发一个React应用程序，我正在使用Redux来管理状态。我有以下代码：

reducer.js

import { actionTypes } from "./actionsTypes";

const initialState = {
  items: [],
  loading: false,
  error: null,
  bookmarks: [],
  hidden: false,
  basket: [],
};

const productReducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.FETCH_PRODUCTS_BEGIN:
      return {
        ...state,
        loading: true,
        error: null,
      };

    case actionTypes.FETCH_PRODUCTS_SUCCESS:
      return {
        ...state,
        loading: false,
        items: action.payload,
      };

    case actionTypes.FETCH_PRODUCTS_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload,
        items: [],
      };

    case actionTypes.ADD_TO_BOOKMARK:
      return {
        ...state,
        bookmarks: [...state.bookmarks, action.payload],
      };

    case actionTypes.ADD_TO_BASKET:
      return {
        ...state,
        basket: [...state.basket, action.payload],
      };

    case actionTypes.TOGGLE_HIDDEN:
      return {
        ...state,
        hidden: !state.hidden,
      };

    default:
      return state;
  }
};

export default productReducer;

actions.js

import axios from "axios";
import { actionTypes } from "./actionsTypes";

..
...
...

export const addToBookmarks = (item) => ({
  type: actionTypes.ADD_TO_BOOKMARK,
  payload: item,
});

export const addToBasket = (product) => ({
  type: actionTypes.ADD_TO_BASKET,
  payload: product,
});

axios.defaults.baseURL = "https://fakestoreapi.com";

export const fetchProducts = () => {
  return (dispatch) => {
    dispatch(fetchProductsBegin());
    try {
      return axios
        .get("https://fakestoreapi.com/Products")
        .then(({ data }) => dispatch(fetchProductsSuccess(data)));
    } catch (error) {
      dispatch(fetchProductsFailure(error));
    }
  };
};

selectors.js

import { createSelector } from "reselect";

export const selectItems = (state) => state.products; 
export const selectBookmarksProducts = createSelector(
[selectItems],
(shop) => shop.bookmarks
); 

对于我的还原器函数，初始状态(项)是从api.检索数据的。

Product.js

const Product = ({ product, toggleHidden, addToBookmarks, addToBasket }) => {
  const { title, category, description, image, price } = product || {};    
  return (
    <div className="relative">
     ....
     .....
      <HeartIcon
        className={`absolute top-2 right-4 w-8 cursor-pointer ${
          bookmark ? "text-red-500" : "text-gray-500"
        }`}
        onClick={() => addToBookmarks(product)}
      />
      <CustomButton onClick={() => addToBasket(product)}>
        Add to Basket
      </CustomButton>
    </div>
  );
};

export const mapDispatchToProps = (dispatch) => ({
  addToBookmarks: (item) => dispatch(addToBookmarks(item)),
  toggleHidden: () => dispatch(toggleHidden()),
  addToBasket: (item) => dispatch(addToBasket(item)),
});

export default connect(null, mapDispatchToProps)(Product);

注意:我发送了一个操作addToBookmarks，然后将产品作为一个对象传递，我想在bookmarksPage中获取书签产品--我不知道为什么会出现错误TypeError: state.bookmarks是不可迭代的

有人能帮忙吗？

Answer 1

我相信跟随改变会解决这个问题。

case actionTypes.ADD_TO_BOOKMARK:
{
      const bookmarks = state.bookmarks;
      bookmarks.push(action.payload);
      return {
        ...state,
        bookmarks,
      };
}