Le .map je suis pas sur que ca soit la bonne solution
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:
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
Problème toujours d'actualité ?
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
