Discussion :

[d3LTa7]

Bonjour

Je suis actuellement novice en ReactJS et j'essaye de faire un projet d'étude qui consiste à reprendre des data d'une API et de les ressortir via React...
Je m'en sors un peu mais c'est compliqué encore pour moi à bien comprendre
Je bute sur un souci de pouvoir mettre des conditions dans un render suite à une requete AJAX qui est en .map

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
import React, {Component} from 'react'
import Result from './Result'
import Info from './Info'
import {getDataArt, getDataAlb, getDataTit, getDataAll} from '../api/musicbrain'
 
 
 
class ResultContainer extends Component{
 
    constructor(props){
        super(props);
        this.state ={
            "list" : []
        }
 
    }
 
 
    componentDidUpdate = () =>{
        if(this.props.category === "artiste"){
            getDataArt(this.props.search, this.comApi);
        }else if(this.props.category === "titre"){
            getDataTit(this.props.search, this.comApi);
        }else if(this.props.category === "album"){
            getDataAlb(this.props.search, this.comApi);
        }else{
            getDataAll(this.props.search, this.comApi);
        }
    }
 
 
    comApi = (data) =>{
        const rec = data.recordings;
 
        this.setState({
            "list" : rec
        })
    }
 
    // recupImg = () =>{
    //     const test = stock.recordings;
    // }
 
 
    render(){
        return(
            <div>
                {this.state.list.map((m,i) => <Result key = {i} nombre = {i+1} artiste = {m["artist-credit"][0].name} titre = {m.title} album = {m.releases[0].title}/>)}
 
            </div>
        );
    }
}
export default ResultContainer;

donc mes requetes vont bien chercher ce que je veux mais...


PB numéro 1 quand je fais du console.log j'ai les résultats en boucle non stop, à cause du componentDidUpdate... Mais si je met juste componentDidMount, je n'ai aucun rendu qui s'affiche

PB numéro 2, dans le render c'est avec le .map que j'arrive à afficher les résultats sauf quedans ce cas de figure je ne voit pas comment faire une condition, par exemple, il arrive que certains résultat n'ai pas de "releases" et dans ces cas la ça affiche une erreur et sinon pouvoir manipuler cette lignes pour inclure condition, ou sinon, les résultats de ma requetes pour pouvoir les organiser en pagination par exemple ou inclure un résultat quand l'api n'en fourni pas pour éviter le message d'erreur

Je n'ai pas partager les autres composants mais si besoin je peux le faire mais peut être certains d'entre vous trouveront la solution à mon soucis sans à avoir besoin des autres parties ^^

Merci d'avance

[giannone_nicolas]

Bonjour,

Je voulais savoir si vous aviez trouvé entre temps une solution ou si le problème était tjs d'actualité ?

Bonne journée,

Nicolas Giannone

[gwyohm]

Salut,

A propos du PB 1:
componentDidUpdate est appelée chaque fois que les props ou l'état (state) de ton composant changent. Dans le code de cette méthode, tu vas après l'appel HTTP faire une mise à jour du state qui va de nouveau faire une requête et mettre à jour le state et donc déclencher componentDidUpdate, et tu pars en boucle infini.
Pour corriger, tu peux dans componentDidUpdate conditionner tes appels au fait que category a changé. pour ça, il suffit d'exploiter le premier paramètre de componentDidUpdate qui te donne les props avant le changement (prevProps)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
    componentDidUpdate = (prevProps) =>{
      if (prevProps.category !== this.props.category) { // conditionner le traitement au fait que la props a changée
        if(this.props.category === "artiste"){
            getDataArt(this.props.search, this.comApi);
        }else if(this.props.category === "titre"){
            getDataTit(this.props.search, this.comApi);
        }else if(this.props.category === "album"){
            getDataAlb(this.props.search, this.comApi);
        }else{
            getDataAll(this.props.search, this.comApi);
        }
      }
    }

Pour ton PB 2, map est la bonne solution. En fonction de ce que tu veux tu peux soit

• Ne pas afficher les éléments qui sont incomplets
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
   
  // Exemple filtrer les données incomplètes avec filter
  this.state.list.filter(item => item['artist-credit'] && item['artist-credit'][0] && item.releases && item.releases[0])
  .map((m,i) => (<Result key = {i} nombre = {i+1} artiste = {m["artist-credit"][0].name} titre = {m.title} album = {m.releases[0].title}/>))

• Ecrire un composant Result plus "intelligent"
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  // Tu modifies Result pour qu'il gère lui même les cas de données incomplètes
  this.state.list.map((item, i) => (<Result key={i} item={item}/>)

• T'assurer que les données ont le format attendu, quitte à mettre des valeurs par défaut par exemple en utilisant la destructuration
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
   
  this.state.list
    .map(({
     'artist-credit': [
       { name = 'Artiste non renseigné' /*valeur par défaut*/ }
     ] = [] /* par défaut, artict-credit est un tableau vide*/, 
     title,
     releases: [
      { title: albumTitle /*pas de valeur par défaut pour title*/ }
     ] = [] /* par défaut, releases est un tableau vide */
    } = {} /* = {} traite le cas (improbable) ou l'item est undefined*/) => ({artistName: name, title, albumTitle})) /* on renvoie un objet plus simple et plus "sur" en terme de données */
    .map((m,i) => (<Result key = {i} nombre = {i+1} artiste = {m.artistName} titre = {m.title} album = {m.albumTitle}/>))

Note que dans les fragments de code, tu peux bien sur remplacer les arrow functions inline par des méthodes du composant, ce qui permet plus de lisibilité