Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Reactjs] - Lifecylce et AJAX

Récupérer des données suite à une modification de state

    19 juin 2019 à 15:23:47

    Bonjour,

    Je suis nouveau sur React et suite à la lecture du cours j’essaye de mettre en place un système de filtres similaire a ce que l'on peut trouver sur amazon ou autre.

    L'utilisateur fait une recherche, puis peut affiner son résultat via des critères définis

    J'ai mis en place un event sur la case à cocher, lorsque l’événement est déclenché je fais un this.setState ce qui déclenche le render du composant, mais l'état ayant changé, je souhaite avoir les nouvelles données fraîchement filtrées via une requête AJAX.

    Donc je me suis tournée vers les méthode de cycle de vie des composant et j'ai trouvé la méthode componentWillUpdate qui est executée avec le render, sauf que cette méthode sera dépréciée en react 17. J'ai vu que componentDidUpdate peut faire ce que je souhaite, mais problème, cette méthode est exécutée après mon rendering qui est lui même lancé via le this.setState

    Comment je peux mettre en place ça ? A quel endroit je dois faire mon appel AJAX ?

    voici mon code

    index.html

    <!doctype html>
    
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Reactjs - Filtres component</title>
    </head>
    <body>
    <div id="filtres" class="filtres" style="width:250px;"></div>
    <script type="text/javascript">
        var filtres = [{
            "date": {
                "libelle": "Year",
                "buckets": {
                    "date2018": {
                    "name": "date[0]",
                    "value": "2018",
                    "title": 2018,
                    "libelle": 2018,
                    "nb": 1
                 },
                 "date2016": {
                    "name": "date[1]",
                    "value": "2016",
                    "title": 2016,
                    "libelle": 2016,
                    "nb": 54
                  },
                  "date2015": {
                    "name": "date[2]",
                    "value": "2015",
                    "title": 2015,
                    "libelle": 2015,
                    "nb": 70
                  }
                }
              }
            },
            {
             // autres filtres
            }
          }];
        </script>
        <script src="dist/filtresComponent.js"></script>
    </body>
    </html>

    FiltreComponents.js

    import React from 'react'
    import ReactDOM from 'react-dom'
    import Filtres from './Filtres'
    
    ReactDOM.render(<Filtres filtres={filtres} />, document.getElementById('filtres'));

    Filtres.js

    import React, { Component } from 'react'
    import './Filtres.css'
    
    import Crit from './Crit'
    
    class Filtres extends Component {
      constructor(props) {
        super(props);
        this.state = {
          filtres : this.props.filtres,
          appliedFiltres : {}
        }
      }
    
      addFiltre = (filtreName, filtreValue) => {
        console.log('addFiltre from FiltresComponent !!');
        console.log('We add : ');
        console.log('filtreName :' + filtreName + ' ,value : ' + filtreValue);
        
        this.setState((state) => {
          return {appliedFiltres: Object.assign(state.appliedFiltres, {[filtreName]: filtreValue})}
        });
    
        console.log(this.state);
        
      }
    
      // before re-rendering sounds good but will be deprecated on reactjs 17
      componentWillUpdate = () => {
        console.log('componentWillUpdate');
        // Fetching before rendering ?
      }
      
    
      render() {
        console.log('render Filtres.js');
        return ([
          this.state.filtres.map((crit, index) =>  {
            let libelle = crit[Object.keys(crit)].libelle;
            let critValues = Object.values(crit[Object.keys(crit)].buckets);
            return <Crit key={index} libelle={libelle} critValues={critValues} addFiltre={this.addFiltre}/>
          })
        ])
      }
    }
    
    export default Filtres

    Crit.js

    import React, { Component } from 'react'
    
    
    class Crit extends Component {
    
      static defaultProps = {
        open : true
      }
    
      constructor(props) {
        super(props);
        this.state = {
          open : this.props.open
        }
      }
    
      showHideCrit = (e) => {
        if(this.state.open){
          e.target.nextElementSibling.style.display = 'none';
          this.setState({ open: false });
        }else{
          e.target.nextElementSibling.style.display = 'flex';
          this.setState({ open: true });
        }
      }
    
      addFiltre = (e) => {
        console.log('addFiltre from CritComponent !!');
        let filtreName = e.target.name;
        let filtreValue = e.target.value;
        this.props.addFiltre(filtreName, filtreValue);
      }
    
      render() {
        console.log('render Crit.js');
        return ([
          <div className="crit">
            <a className={"js-head_crit " + (this.state.open ? 'open' : '' )+""} onClick={this.showHideCrit}>{this.props.libelle}</a>
            <div className="crit-values">
              {
                this.props.critValues.map((critValue,index) => {
                  return (                
                      <div key={index} className="crit-value" data-count={critValue.nb}>
                          <input type="checkbox" name={critValue.name} value={critValue.value} onChange={this.addFiltre}/>
                          <label className="crit-libelle">
                              {critValue.libelle}
                              <span className="crit-nb">{critValue.nb}</span>
                          </label>
                      </div>                
                  )
                })
              }
              </div>
          </div>
        ])
      }
    }
    
    export default Crit

    Sortie de la console



    Je sèche, je suis dessus depuis 2 jours...

    Si vous avez des pistes pour me mettre sur la voie.. merci à vous :)

    • Partager sur Facebook
    • Partager sur Twitter

    [Reactjs] - Lifecylce et AJAX

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown