getData.js

import React, {Component} from 'react';
import shopStore, {panier, panierOperations} from '../Store/shopStore';
import {view} from 'react-easy-state';
import client from '../Store/client';

class Cart extends Component {

  constructor(props) {
    super(props);
    this.state = {
      panier: []
    };
  }

  componentDidMount() {
    panier.listeProduits.map((p, i) => {
      client.getProductByIdFetch(p.id)
      .then(produit => {
        console.log(produit);
        produit.qte = p.qte;
        this.setState(
        { panier: [...this.state.panier, produit] }
        )
      });
    })

    this.getProductData();
  }

  componentDidUpdate() {
    // only update chart if the data has changed
    if (this.state.panier.length !== panier.listeProduits.length) {
      this.setState ({
        panier : panier.listeProduits
      })
    }
  }

  getProductData() {
    let arrayWithData = [];
    panier.listeProduits.map((p, i) => {
      client.getProductByIdFetch(p.id)
      .then(produit => {
        produit.qte = p.qte;
        arrayWithData.push(produit);
      });
    })

console.log(arrayWithData);

  }

  render() {
    return (<div className="cart box_light1 center fullsize">
      <div className="table ">
        <ul>
          <li className="table-header">
            <div className="col w10">Diffuseur</div>
            <div className="col w25">Nom</div>
            <div className="col w20">Quantité</div>
            {
              this.props.prices
                ? <> < div className = "col w10" > Articles</div> < div className = "col w20" > Frais de ports</div> < div className = "col w20" > Sous - total</div></>
                : null
            }
            {
              this.props.control
                ? <div className="col w40">Ajuster</div>
                : null
            }
          </li>
          {
       this.state.panier.map((p, i) => {
         return <>
         <li className="table-row">
           <div className="col w10" data-label="Diffuseur"><img src={p.src + ".jpg"} alt='Aperçu du produit'/></div>
           <div className="col w25" data-label="Nom">{p.nom}</div>
           <div className="col w20" data-label="Quantité">{p.qte}</div>
           {
             this.props.prices
               ? <><div className="col w10" data-label="Articles">{p.prix}
                   €</div>
                 <div className="col w20" data-label="Sous-total">{p.prix * p.qte}
                   € TTC</div></>
               : null
           }
           {
             this.props.control
               ? <div className="col w40" data-label="Ajuster">
                   <i className="fas fa-plus cursor givemespace" onClick={() => panierOperations.addToCart(p.id, 1)}></i>
                   <i className='fas fa-minus cursor givemespace' onClick={() => panierOperations.removeFromCart(p.id, 1)}></i>
                   <i className="fas fa-times cursor givemespace" onClick={shopStore.removeFromCart.bind(p.nom)}></i>
                 </div>
               : null
           }
         </li></>

   })
 }
        </ul>
      </div>

    </div>)

  }

}

export default view(Cart);