-1
votes

Liste dynamique ne rendant pas réagir

J'essaie de rendre une liste de genres de film pour une application simple. Les données sont stockées dans l'état, mais lorsque vous essayez de rendre la liste, rien n'apparaît. Voici le composant:

import React from 'react';

class GetGenres extends React.Component {

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

    componentDidMount() {
        const genres = []
        const url = "https://api.themoviedb.org/3/genre/movie/list?api_key=XXXX&language=en-US"
        fetch(url)
        .then(response => response.json())
        .then(data => {
            for (let i = 0; i < 19; i++) {
            genres.push(data.genres[i].name)
                }
            })
            .catch(error => console.error(error))



        this.setState({genres: genres})
}




/*this.setState({genres: genres});*/


    render() {
        console.log(this.state.genres)
        return (
           <div className='genre-list'> 
           <h1>Genre's</h1>
            <ul>
                {this.state.genres.map((genre, i) => {
                    return <li key={i}>{genre}</li>
                })}
            </ul>

            </div> 
        )
    }
}

reactjs

1 commentaires

Ne partagez jamais votre clé API.

3 Réponses :

0
votes

vous setState code> en dehors de votre puis code>, qui s'exécute bien avant votre .Chen code> Callback se produit. Exécutez-le à l'intérieur

.then(data => {
    for (let i = 0; i < 19; i++) {
        genres.push(data.genres[i].name)
    }
    this.setState({genres: genres})
})

0 commentaires

0
votes

Vous devez déplacer la partie suivante () à l'intérieur de la promesse qui renvoie les données.

Rien n'est rendu car une fois que la demande de récupération est déclenchée, votre code s'allume et appelle le SSTATE avec un tableau vide. p>

Retirez la boucle et appelez simplement P>

this.setState({ genres: data.genres })

0 commentaires

0
votes

Vous faites un appel asynchrone sur ComposantDidMount code>, ce qui signifie que le code à l'intérieur de la promesse résolve les gestionnaires sera exécuté plus tard que votre actuel this.setstate code> -Call. Ceci est facile à corriger uniquement en définissant l'état défini à l'intérieur du gestionnaire de promesses:

componentDidMount() {
  const genres = [];

  const url = "https://api.themoviedb.org/3/genre/movie/list?api_key=a2986eaf427243d1e89aafc1fc124089&language=en-US"

  fetch(url)
    .then(response => response.json())
    .then(data => {
      for (let i = 0; i < 19; i++) {
        genres.push(data.genres[i].name)
      }
      // Here you will have something to show...
      this.setState({genres: genres})
    })
    .catch(error => console.error(error));
}

0 commentaires