Неопределенное сообщение в консоли при доступе к данным json с использованием ax ios в реагирующем редуксе

Question

Мы создаем проект электронной коммерции, использующий реагирующий на редукцию язык интерфейса. Следовательно, мы должны отображать категории продуктов в нашем приложении. Поэтому мы используем библиотеку Ax ios для доступа к данным JSON с сервера. Все работает нормально, но когда я консоль данных ответа журнала, я получаю неопределенное сообщение.

Пожалуйста, помогите мне решить эту проблему ...

компонент категории:

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";

class ElementCategory extends Component {
  render() {
    console.log(this.props.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>sport 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 = (state) => {
  return {
    categories: state.category,
  };
};

export default connect(mapStateToProps, null)(ElementCategory);

магазин. 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),
};

действие / индекс. 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 receiveProducts = (products) => ({
  type: types.RECEIVE_PRODUCTS,
  products,
});

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

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(fetchCategoriesBegin());
  return shop.getCategories((categories) => {
    categories.then((data) => {
      dispatch(receiveCategories(data));
    });
  });
};
export const fetchSingleProduct = (productId) => ({
  type: types.FETCH_SINGLE_PRODUCT,
  productId,
});
export const fetchSingleCategory = (categoryId) => ({
  type: types.FETCH_SINGLE_PRODUCT,
  categoryId,
});

//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,
});

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

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

const initialState = {
  category: [],
};

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

редуктор / индекс. js:

import { combineReducers } from "redux";
import { IntlReducer as Intl, IntlProvider } from "react-redux-multilingual";

// Import custom components
import productReducer from "./products";
import categories from "./categories";
import cartReducer from "./cart";
import filtersReducer from "./filters";
import wishlistReducer from "./wishlist";
import compareReducer from "./compare";

const rootReducer = combineReducers({
  data: productReducer,
  categories,
  cartList: cartReducer,
  filters: filtersReducer,
  wishlist: wishlistReducer,
  compare: compareReducer,
  Intl,
});

export default rootReducer;