Почему рендер товаров одной категории перезаписывает все товары?

Question

[DeniSidorenko]

Добрый день, сделал такой вывод страницы каталога
Вывод категории

import React,{Component} from 'react'
import {connect} from 'react-redux'
import Aside from "../aside/Aside";
import {fetchCategories} from "../../redux/actions/categoriesAction";
import CatalogItem from "./CatalogItem";

class Catalog extends Component {

  renderCategories(){
    const categories = this.props.categories
      return categories.map((category, index) => {
        return(
          <div key={index}  className="catalog-point">
            <div className="title">
              <h2>{category.name}</h2>
            </div>
            <div className="catalog-filters">
              <span>Сортировка:</span>
              <ul>
                <li>
                  <span>Цена</span>
                  <img
                    src="http://delivery.bamboobar.su/wp-content/themes/bamboobar/static/img/assets/catalog/down.svg"
                    alt="Down" />
                </li>
              </ul>
            </div>
            <div className="catalog-items">
              <CatalogItem  categoryId={category._id}/>
            </div>
          </div>
        )
    })
  }

  componentDidMount() {
    this.props.fetchCategories()
  }

  render() {
    return(
      <section className="catalog">
        <div className="content">
          <div className="catalog-wrapper">
            <div className="catalog-main">
              {
                this.props.loading  && this.props.categories !== 0
                ? "<h1> loading </h1>"
                : <ul>
                  {this.renderCategories()}
                  </ul>
              }
            </div>
            <Aside/>
          </div>
        </div>
      </section>
    )
  }
}
const mapStateToProps = (state) =>{
  return{
    categories: state.categoriesReducer.categories,
    loading: state.categoriesReducer.loading,
  }
}

const mapDispatchToProps = (dispatch) => {
  return{
    fetchCategories: () => dispatch(fetchCategories()),
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Catalog)

Файл catalogItem вывод один продукт, как видно мы передаем id категории

import React,{Component} from "react"
import {connect} from "react-redux";
import {fetchProductsById} from "../../redux/actions/productsAction";

class CatalogItem extends Component{
  componentDidMount(){
    this.props.fetchProductsById(this.props.categoryId)
  }

  renderProducts(){
    const products = this.props.products
    return products.map((product, key) => {
      let productImage = product.productImage
      productImage = "http://localhost:5000/" + productImage

      return(
        <div className="catalog-item" key={key} data-id={product._id}  >
          <div className="catalog-item__top">
            <h4>{product.name}</h4>
            <span><span className="woocommerce-Price-amount amount"><bdi>{product.price}<span
              className="woocommerce-Price-currencySymbol">₽</span></bdi></span></span>
          </div>
          <div className="catalog-item__info">
            <p></p>
          </div>
          <div className="catalog-item__photo">
            <img src={productImage} />
            <div className="catalog-photo__general">
              <div className="catalog-photo__gramme"><span>{product.weight} г</span>
              </div>
            </div>
          </div>
          <div className="lds-ripple">
            <div></div>
            <div></div>
          </div>
        </div>
      )
    })
  }



  render() {
    return(
      <React.Fragment>
        {
          this.props.loading  && this.props.products !== 0
            ? "<h1> loading </h1>"
            : <React.Fragment>
              {this.renderProducts()}
            </React.Fragment>
        }
      </React.Fragment>
    )
  }
}


const mapStateToProps = (state) =>{
  return{
    products: state.productsReducer.products,
    loading: state.productsReducer.loading
  }
}

const mapDispatchToProps = (dispatch) => {
  return{
    fetchProductsById: (id) => dispatch(fetchProductsById(id))
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(CatalogItem)

И за чего в конце на все категории выводится продукты лишь последней категории. А надо что бы каждая категория свои выводила

Comments

[Vladimir Lewandowski]

Что делает fetchProductsById?

Вангую, что последний fetch перезаписывает все айтемы в productsReducer.products.

[Vladimir Lewandowski]

Ну и с

Файл catalogItem вывод один продукт

я бы поспорил

[DeniSidorenko]

Vladimir Lewandowski, Верно, перезаписывает, даже при перезагрузке видно как перезаписывает) Но не могу понять как это решить))

[Vladimir Lewandowski]

DeniSidorenko, вы рано начали изучать Редакс