javascript - 如何解决 TypeError: catalogs.map is not a function in react.js app

Question

我是一个新手，如果我无法完全解释所面临的问题，请原谅我，但是在谷歌搜索之后，我了解到我试图映射的对象不是一个数组（这次不确定是这种情况因为，我在网上看到的所有示例都是相同的，过去 4 周我花时间努力跟进我在网上看到的示例，但我无法让我的 react 应用程序正常工作

在

目录.js

（这是 react 组件脚本，位于组件文件夹中），我有这个

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import * as catalogActions from "../../actions/catalog";

import ProductImage from "./ProductImage";
import ProductThumbs from "./ProductThumbs";

export class CatalogComponent extends Component {
  componentDidMount() {
    this.props.fetchCatalog();
  }
  render() {
    const { catalogs, selectProduct, selectedProduct } = this.props;
    return (
      //let { catalogs } = this.props;
      <div>
        <h1>Catalog Field</h1>
        <div className="image-gallery" hidden={!selectedProduct}>
          <ProductImage product={selectedProduct} />
          <ProductThumbs selectProduct={selectProduct} catalogs={catalogs} />
        </div>
      </div>
    );
  }
}

export default connect(
  state => ({
    catalogs: state.catalogs,
    selectedProduct: state.selectedProduct
  }),
  dispatch => bindActionCreators(catalogActions, dispatch)
)(CatalogComponent);

而在

productImage.js

我有这个

import React from “react”;

export default function ProductImage({ product }) {
  return (
    <div className="gallery-image">
      <div>{product ? <img src={product} alt={"gbenga"} /> : null}</div>
    </div>
  );
}

和

productThumbs.js

有这个

从“反应”导入反应；

export default function ProductThumbs({ catalogs, selectProduct }) {
  return (
    <div className="image-scroller">
      {catalogs.map((product, index) => (
        <div key={index} onClick={selectProduct.bind(this, product)}>
          <img src={product} alt={"gbenga now"} />
        </div>
      ))}
    </div>
  );
}

正如它所说，问题出在这个脚本中

catalogs.map 不是函数

这就是减速机里的东西

import { CATALOGS_RECEIVED } from "../constants/catalog";
import { SELECT_PRODUCT } from "../constants/catalog";

    export default function catalogs(state = { catalogs: [] }, action) {
      switch (action.type) {
        case CATALOGS_RECEIVED:
          console.log(JSON.stringify(action.catalogs));
          return { ...state, catalogs: action.catalogs };
        case SELECT_PRODUCT:
          return { ...state, selectedProduct: action.product };
        default:
          return state;
      }
    }

我不认为这个问题有任何关系

传奇

标签： javascriptreactjsreact-redux