[Reactjs] - Lifecylce et AJAX - Récupérer des données suite à une modification de state par inkquery - page 1

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

[Reactjs] - Lifecylce et AJAX

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

[Reactjs] - Lifecylce et AJAX

Supprimer

Modérer

Signaler le message aux modérateurs