Возникли проблемы при отображении JSON данных в реагировать

Question

мы создаем сайт электронной коммерции, используя React и Redux в качестве внешнего интерфейса. И нам нужно отобразить данные категорий на странице категорий. Мы успешно получаем JSON данные в консоли, но у нас есть проблема с отображением на странице компонента категории.

Помогите решить эту проблему

редуктор / категории. js:

import { RECEIVE_CATEGORIES } from "../constants/ActionTypes";

const initialState = {
  categories: []
};

const categoryReducer = (state = initialState, action) => {
  switch (action.type) {
    case RECEIVE_CATEGORIES:
      return {
        ...state,
        categories: action.categories
      };
    default:
      return state;
  }
};
export default categoryReducer;

действие / индекс. js:

import shop from '../api/shop'
import * as types from '../constants/ActionTypes'
import store from "../store";
import { toast  } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.min.css';

export const fetchProductsBegin = () => ({
    type: types.FETCH_PRODUCTS_BEGIN
});

export const fetchCategoryBegin = () => ({
    type: types.FETCH_CATEGORIES_BEGIN
});


export const receiveProducts = products => ({
    type: types.RECEIVE_PRODUCTS,
    products
})

export const receiveCategories = categories => ({
    type: types.RECEIVE_CATEGORIES,
    categories
})

export const getAllProducts = () => dispatch => { 
    dispatch(fetchProductsBegin()); 
    return shop.getProducts(
        products => {
        products.then((data)=> { dispatch(receiveProducts(data));})})

}

export const getAllCategories = () => dispatch => { 
    dispatch(fetchCategoryBegin()); 
    return shop.getCategories(
        products => {
        products.then((data)=> { 
            console.log("executed");
            dispatch(receiveCategories(data));})})

}
export const fetchSingleProduct = productId => ({
    type: types.FETCH_SINGLE_PRODUCT,
    productId
})




//it seems that I should probably use this as the basis for "Cart"
export const addToCart = (product,qty) => (dispatch) => {
    toast.success("Item Added to Cart");
        dispatch(addToCartUnsafe(product, qty))

}
export const addToCartAndRemoveWishlist = (product,qty) => (dispatch) => {
    toast.success("Item Added to Cart");
    dispatch(addToCartUnsafe(product, qty));
    dispatch(removeFromWishlist(product));
}
export const addToCartUnsafe = (product, qty) => ({
    type: types.ADD_TO_CART,
    product,
    qty
});
export const removeFromCart = product_id => (dispatch) => {
    toast.error("Item Removed from Cart");
    dispatch({
        type: types.REMOVE_FROM_CART,
        product_id
    })
};
export const incrementQty = (product,qty) => (dispatch) => {
    toast.success("Item Added to Cart");
    dispatch(addToCartUnsafe(product, qty))

}
export const decrementQty = productId => (dispatch) => {
    toast.warn("Item Decrement Qty to Cart");

    dispatch({
    type: types.DECREMENT_QTY,
    productId})
};



//it seems that I should probably use this as the basis for "Wishlist"
export const addToWishlist = (product) => (dispatch) => {
    toast.success("Item Added to Wishlist");
    dispatch(addToWishlistUnsafe(product))

}
export const addToWishlistUnsafe = (product) => ({
    type: types.ADD_TO_WISHLIST,
    product
});
export const removeFromWishlist = product_id => (dispatch) => {
    toast.error("Item Removed from Wishlist");
    dispatch({
        type: types.REMOVE_FROM_WISHLIST,
        product_id
    })
};


//Compare Products
export const addToCompare = (product) => (dispatch) => {
    toast.success("Item Added to Compare");
    dispatch(addToCompareUnsafe(product))

}
export const addToCompareUnsafe= (product) => ({
    type: types.ADD_TO_COMPARE,
    product
});
export const removeFromCompare = product_id => ({
    type: types.REMOVE_FROM_COMPARE,
    product_id
});


// Filters
export const filterBrand = (brand) => ({
    type: types.FILTER_BRAND,
    brand
});
export const filterColor = (color) => ({
    type: types.FILTER_COLOR,
    color
});
export const filterPrice = (value) => ({
    type: types.FILTER_PRICE,
    value
});
export const filterSort = (sort_by) => ({
    type: types.SORT_BY,
    sort_by
});


// Currency
export const changeCurrency = (symbol) => ({
    type: types.CHANGE_CURRENCY,
    symbol
});

API / магазин. js:

/**
 * Mocking client-server processing
 */
import axios from "axios";
// import _products from './data.json'
import React, { useState, useEffect } from "react";
import store from "../store";
import { receiveProducts } from "../actions/index";

const TIMEOUT = 100;

const _products = axios
  .get(`http://localhost:4000/product`)
  .then((response) => {
    return response.data;
  });

const _category = axios
  .get(`http://localhost:4000/categories`)
  .then((response) => {
    return response.data;
  });

export default {
  getProducts: (cb, timeout) =>
    setTimeout(() => cb(_products), timeout || TIMEOUT),
  getCategories: (cb, timeout) =>
    setTimeout(() => cb(_category), timeout || TIMEOUT),
  buyProducts: (payload, cb, timeout) =>
    setTimeout(() => cb(), timeout || TIMEOUT),
};

element-category.jsx:

import React, { Component } from "react";
import Slider from "react-slick";

import Breadcrumb from "../../common/breadcrumb";
import { Slider6, Slider4 } from "../../../services/script";
import "react-tabs/style/react-tabs.scss";
import { connect } from "react-redux";
import { getAllCategories } from "../../../actions";

class ElementCategory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categories: this.props.categories
    };
  }

  componentDidMount() {
    this.props.getAllCategories();
  }
  render() {
    console.log(this.state.categories);
    return (
      <div>
        <Breadcrumb parent={"Elements"} title={"Category"} />

        {/*Category One*/}
        <div className="container">
          <section className="section-b-space">
            <div className="row">
              <div className="col">
                <Slider {...Slider6} className="slide-6 no-arrow">
                  <div className="category-block">
                    <a href="#">
                      <div className="category-image">
                        <img
                          src={`${process.env.PUBLIC_URL}/assets/images/icon/cat1.png`}
                          alt=""
                        />
                      </div>
                    </a>
                    <div className="category-details">
                      <a href="#">
                        <h5>shoes</h5>
                      </a>
                    </div>
                  </div>
                  <div className="category-block">
                    <a href="#">
                      <div className="category-image">
                        <img
                          src={`${process.env.PUBLIC_URL}/assets/images/icon/cat2.png`}
                          alt=""
                        />
                      </div>
                    </a>
                    <div className="category-details">
                      <a href="#">
                        <h5>casual shoes</h5>
                      </a>
                    </div>
                  </div>
                  <div className="category-block">
                    <a href="#">
                      <div className="category-image">
                        <img
                          src={`${process.env.PUBLIC_URL}/assets/images/icon/cat3.png`}
                          alt=""
                        />
                      </div>
                    </a>
                    <div className="category-details">
                      <a href="#">
                        <h5>formal shoes</h5>
                      </a>
                    </div>
                  </div>
                  <div className="category-block">
                    <a href="#">
                      <div className="category-image">
                        <img
                          src={`${process.env.PUBLIC_URL}/assets/images/icon/cat4.png`}
                          alt=""
                        />
                      </div>
                    </a>
                    <div className="category-details">
                      <a href="#">
                        <h5>flat</h5>
                      </a>
                    </div>
                  </div>
                  <div className="category-block">
                    <a href="#">
                      <div className="category-image">
                        <img
                          src={`${process.env.PUBLIC_URL}/assets/images/icon/cat5.png`}
                          alt=""
                        />
                      </div>
                    </a>
                    <div className="category-details">
                      <a href="#">
                        <h5>heels</h5>
                      </a>
                    </div>
                  </div>
                  <div className="category-block">
                    <a href="#">
                      <div className="category-image">
                        <img
                          src={`${process.env.PUBLIC_URL}/assets/images/icon/cat6.png`}
                          alt=""
                        />
                      </div>
                    </a>
                    <div className="category-details">
                      <a href="#">
                        <h5>boots</h5>
                      </a>
                    </div>
                  </div>
                  <div className="category-block">
                    <a href="#">
                      <div className="category-image">
                        <img
                          src={`${process.env.PUBLIC_URL}/assets/images/icon/cat2.png`}
                          alt=""
                        />
                      </div>
                    </a>
                    <div className="category-details">
                      <a href="#">
                        <h5>casual shoes</h5>
                      </a>
                    </div>
                  </div>
                  <div className="category-block">
                    <a href="#">
                      <div className="category-image">
                        <img
                          src={`${process.env.PUBLIC_URL}/assets/images/icon/cat3.png`}
                          alt=""
                        />
                      </div>
                    </a>
                    <div className="category-details">
                      <a href="#">
                        <h5>casual shoes</h5>
                      </a>
                    </div>
                  </div>
                </Slider>
              </div>
            </div>
          </section>
        </div>

        {/*Category Two*/}
        <section className="p-0 ratio2_1">
          <div className="container-fluid">
            <div className="row category-border">
              <div className="col-sm-4 border-padding">
                <div className="category-banner">
                  <div>
                    <img
                      src={`${process.env.PUBLIC_URL}/assets/images/cat1.png`}
                      className="img-fluid blur-up lazyload bg-img"
                      alt=""
                    />
                  </div>
                  <div className="category-box">
                    <a href="#">
                      <h2>men</h2>
                    </a>
                  </div>
                </div>
              </div>
              <div className="col-sm-4 border-padding">
                <div className="category-banner">
                  <div>
                    <img
                      src={`${process.env.PUBLIC_URL}/assets/images/cat2.png`}
                      className="img-fluid blur-up lazyload bg-img"
                      alt=""
                    />
                  </div>
                  <div className="category-box">
                    <a href="#">
                      <h2>women</h2>
                    </a>
                  </div>
                </div>
              </div>
              <div className="col-sm-4 border-padding">
                <div className="category-banner">
                  <div>
                    <img
                      src={`${process.env.PUBLIC_URL}/assets/images/cat3.png`}
                      className="img-fluid blur-up lazyload bg-img"
                      alt=""
                    />
                  </div>
                  <div className="category-box">
                    <a href="#">
                      <h2>kids</h2>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/*Category Three*/}
        <div className="container category-button">
          <section className="section-b-space">
            <div className="row partition1">
              <div className="col">
                <a href="#" className="btn btn-outline btn-block">
                  airbag
                </a>
              </div>
              <div className="col">
                <a href="#" className="btn btn-outline btn-block">
                  burn bag
                </a>
              </div>
              <div className="col">
                <a href="#" className="btn btn-outline btn-block">
                  briefcase
                </a>
              </div>
              <div className="col">
                <a href="#" className="btn btn-outline btn-block">
                  carpet bag
                </a>
              </div>
              <div className="col">
                <a href="#" className="btn btn-outline btn-block">
                  money bag
                </a>
              </div>
              <div className="col">
                <a href="#" className="btn btn-outline btn-block">
                  tucker bag
                </a>
              </div>
            </div>
          </section>
        </div>

        {/*Category Four*/}
        <div className="category-bg ratio_square">
          <div className="container-fluid p-0">
            <div className="row order-section">
              <div className="col-sm-4 p-0">
                <a href="#" className="image-block">
                  <img
                    alt=""
                    src={`${process.env.PUBLIC_URL}/assets/images/cat1.jpg`}
                    className="img-fluid blur-up lazyload bg-img"
                  />
                </a>
              </div>
              <div className="col-sm-4 p-0">
                <div className="contain-block even">
                  <div>
                    <h6>new products</h6>
                    <a href="#">
                      <h2>zipper storage bag</h2>
                    </a>
                    <a href="#" className="btn btn-solid category-btn">
                      -80% off
                    </a>
                    <a href="#">
                      <h6>
                        <span>shop now</span>
                      </h6>
                    </a>
                  </div>
                </div>
              </div>
              <div className="col-sm-4 p-0">
                <a href="#" className="image-block">
                  <img
                    alt=""
                    src={`${process.env.PUBLIC_URL}/assets/images/cat2.jpg`}
                    className="img-fluid blur-up lazyload bg-img"
                  />
                </a>
              </div>
              <div className="col-sm-4 p-0">
                <div className="contain-block">
                  <div>
                    <h6>on sale</h6>
                    <a href="#">
                      <h2>tucker bag</h2>
                    </a>{" "}
                    <a href="#" className="btn btn-solid category-btn">
                      save 30% off
                    </a>
                    <a href="#">
                      <h6>
                        <span>shop now</span>
                      </h6>
                    </a>
                  </div>
                </div>
              </div>
              <div className="col-sm-4 p-0">
                <a href="#" className="image-block even">
                  <img
                    alt=""
                    src={`${process.env.PUBLIC_URL}/assets/images/cat3.jpg`}
                    className="img-fluid blur-up lazyload bg-img"
                  />
                </a>
              </div>
              <div className="col-sm-4 p-0">
                <div className="contain-block">
                  <div>
                    <h6>summer sale</h6>
                    <a href="#">
                      <h2>gate check bag</h2>
                    </a>{" "}
                    <a href="#" className="btn btn-solid category-btn">
                      minimum 50% off
                    </a>
                    <a href="#">
                      <h6>
                        <span>shop now</span>
                      </h6>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/*Category Five*/}
        <section className="ratio_portrait">
          <div className="container">
            <div className="row">
              <div className="col">
                <Slider {...Slider4} className="slide-4 category-m no-arrow">
                  <div>
                    <div className="category-wrapper">
                      <div>
                        <div>
                          <img
                            src={`${process.env.PUBLIC_URL}/assets/images/watch/cat1.png`}
                            className="img-fluid blur-up lazyload bg-img"
                            alt=""
                          />
                        </div>
                        <h4>watch models</h4>
                        <ul className="category-link">
                          <li>
                            <a href="#">d1 milano</a>
                          </li>
                          <li>
                            <a href="#">damaskeening</a>
                          </li>
                          <li>
                            <a href="#">diving watch</a>
                          </li>
                          <li>
                            <a href="#">dollar watch</a>
                          </li>
                        </ul>
                        <a href="#" className="btn btn-outline">
                          view more
                        </a>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div className="category-wrapper">
                      <div>
                        <div>
                          <img
                            src={`${process.env.PUBLIC_URL}/assets/images/watch/cat2.png`}
                            className="img-fluid blur-up lazyload bg-img"
                            alt=""
                          />
                        </div>
                        <h4>calculator watch</h4>
                        <ul className="category-link">
                          <li>
                            <a href="#">Shock-resistant watch</a>
                          </li>
                          <li>
                            <a href="#">Skeleton watch</a>
                          </li>
                          <li>
                            <a href="#">Slow watch</a>
                          </li>
                          <li>
                            <a href="#">Solar-powered watch</a>
                          </li>
                        </ul>
                        <a href="#" className="btn btn-outline">
                          view more
                        </a>
                      </div>
                    </div>
                  </div>
                  <div className="category-wrapper">
                    <div>
                      <div>
                        <img
                          src={`${process.env.PUBLIC_URL}/assets/images/watch/cat3.png`}
                          className="img-fluid blur-up lazyload bg-img"
                          alt=""
                        />
                      </div>
                      <h4>Antimagnetic watch</h4>
                      <ul className="category-link">
                        <li>
                          <a href="#">Watchmaking conglomerates</a>
                        </li>
                        <li>
                          <a href="#">Breitling SA</a>
                        </li>
                        <li>
                          <a href="#">Casio watches</a>
                        </li>
                        <li>
                          <a href="#">Citizen Watch</a>
                        </li>
                      </ul>
                      <a href="#" className="btn btn-outline">
                        view more
                      </a>
                    </div>
                  </div>
                  <div className="category-wrapper">
                    <div>
                      <div>
                        <img
                          src={`${process.env.PUBLIC_URL}/assets/images/watch/cat2.png`}
                          className="img-fluid blur-up lazyload bg-img"
                          alt=""
                        />
                      </div>
                      <h4>History of watches</h4>
                      <ul className="category-link">
                        <li>
                          <a href="#">Manufacture d'horlogerie</a>
                        </li>
                        <li>
                          <a href="#">Mechanical watch</a>
                        </li>
                        <li>
                          <a href="#">Microbrand watches</a>
                        </li>
                        <li>
                          <a href="#">MIL-W-46374</a>
                        </li>
                      </ul>
                      <a href="#" className="btn btn-outline">
                        view more
                      </a>
                    </div>
                  </div>
                  <div className="category-wrapper">
                    <div>
                      <div>
                        <img
                          src={`${process.env.PUBLIC_URL}/assets/images/watch/cat1.png`}
                          className="img-fluid blur-up lazyload bg-img"
                          alt=""
                        />
                      </div>
                      <h4>watch models</h4>
                      <ul className="category-link">
                        <li>
                          <a href="#">d1 milano</a>
                        </li>
                        <li>
                          <a href="#">damaskeening</a>
                        </li>
                        <li>
                          <a href="#">diving watch</a>
                        </li>
                        <li>
                          <a href="#">dollar watch</a>
                        </li>
                      </ul>
                      <a href="#" className="btn btn-outline">
                        view more
                      </a>
                    </div>
                  </div>
                </Slider>
              </div>
            </div>
          </div>
        </section>

        {/*Category Six*/}
        <section className="section-b-space">
          <div className="container">
            <div className="row background">
              <div className="col">
                <a href="#">
                  <div className="contain-bg">
                    <h4 data-hover="size 06">size 06</h4>
                  </div>
                </a>
              </div>
              <div className="col">
                <a href="#">
                  <div className="contain-bg">
                    <h4>size 07</h4>
                  </div>
                </a>
              </div>
              <div className="col">
                <a href="#">
                  <div className="contain-bg">
                    <h4>size 08</h4>
                  </div>
                </a>
              </div>
              <div className="col">
                <a href="#">
                  <div className="contain-bg">
                    <h4>size 09</h4>
                  </div>
                </a>
              </div>
              <div className="col">
                <a href="#">
                  <div className="contain-bg">
                    <h4>size 10</h4>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }
}

const mapStateToProps = store => {
  return {
    categories: store.category.categories
  };
};

// export default connect(mapStateToProps, { getAllCategories })(ElementCategory);
export default connect(mapStateToProps, { getAllCategories })(ElementCategory);