1
votes

Comment accéder aux valeurs d'état par index dans React

J'ai du mal à accéder aux valeurs dans un état dans React en utilisant axios et mon code est le suivant:

render () {
  return <h1>Movie Examples include {this.state.moviedata[0].title}</h1>
}

Le console.log ressemble à ceci:

0: {title: "Terminator 2: Judgement Day", plot: "Rise of the machines.", year: 1991}
1: {title: "The Italian Job", plot: "A comic hinging on a traffic jam", year: 1969}

Comment puis-je inclure le titre de la première entrée, c'est-à-dire «Terminator 2: Judgment Day», à l'intérieur de la balise h1, après le mot «inclure»?

J'ai essayé:

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class App extends React.Component {
  state = {
    moviedata:null
  }

  getMovies(){
    axios.get("http://127.0.0.1:8000/api/v1/movies/")
      .then(moviedata => {
        this.setState({
          moviedata: moviedata.data    
        });
      })
      .then(x => { console.log(this.state.moviedata)});
  }

  componentDidMount(){
    this.getMovies();
  }

  render () {
    return <h1>Movie Examples include </h1>
  }
}

ReactDOM.render(<App />, document.getElementById('react-app'));

et a obtenu une erreur TypeError: Impossible de lire la propriété '0' de null

reactjs axios jsx

0 commentaires

3 Réponses :

0
votes

Tout d'abord, vous devez "savoir" que le composant est dans un état de "chargement". Sans cela, vos données d'état ne sont pas définies (chargement en cours)

Voici comment procéder:

class App extends React.Component {
  state = {
    moviedata:null,
    isLoading: true
  }

  getMovies(){
    axios.get("http://127.0.0.1:8000/api/v1/movies/")
      .then(moviedata => {
        this.setState({
          moviedata: moviedata.data,
          isLoading: false
        });
      })
      .then(x => { console.log(this.state.moviedata)});
  }

  componentDidMount(){
    this.getMovies();
  }

  render () {
    if (this.state.isLoading) {
      return <h1>Please wait...</h1>
    }

    // show only the first movie
    return <h1>Movie #1 {this.state.moviedata[0].title}</h1>;

    // show all the movies
    return (
      <>
        {this.state.moviedata.map((m, idx) => <h1 key={idx}>Movie: {m.title}</h1>}
      </>);
  }
}

3 commentaires

Merci va examiner cela. Je suis encore nouveau sur React, donc je ne sais pas pour le moment comment inclure correctement votre dernière déclaration de retour dans mon cas

Dans mon exemple, je montre tous les films. Je vais ajouter un exemple pour ne montrer que le premier film.

Très bien, je comprends votre exemple maintenant. Merci

2
votes

moviedata dans l'état de votre composant est initialement null , donc essayer d'accéder à [0] à partir de cela entraînera votre erreur.

p> Vous pourriez par exemple retour tôt de la méthode de rendu jusqu'à ce que moviedata ait été défini.

Exemple

class App extends React.Component {
  // ...

  render() {
    const { moviedata } = this.state;

    if (moviedata === null) {
      return null;
    }
    return <h1>Movie Examples include {moviedata[0].title}</h1>;
  }
}

4 commentaires

Merci cela a fonctionné! Je suis toujours un débutant tellement content de la simplicité de ta réponse :)

Alors, la fonction de rendu continue-t-elle à boucler jusqu'à ce que moviedata soit défini avant de continuer avec l'instruction return ?

@West Great! De rien. Un composant est rendu à nouveau lorsque l'état ou les accessoires changent, donc la méthode de rendu sera exécutée une fois avant le chargement de vos données, puis à nouveau lorsque vous utilisez setState dans le rappel axios.

Entendu! Salut mon pote

0
votes

Vous devez tenir compte du fait que la requête Axios est asynchrone, le composant peut donc être rendu avant que les données ne soient chargées. Par exemple:

render () {
  const data = this.state.moviedata;
  return <h1>Movie Examples include {data ? data[0].title : ""}</h1>
}

1 commentaires

J'ai essayé ceci et rien ne s'est affiché après 'inclure'