5
votes

Le rendu est appelé deux fois lors de la récupération de données à partir d'une API REST

J'essaie d'interagir avec une API REST à l'aide de React et j'ai réalisé que lorsque je récupère les données, render est appelé une fois sans les données , puis à nouveau avec les données.

Cela lève une exception lorsque j'essaie de traiter ces données, mais je peux utiliser une instruction if pour vérifier si les données sont nulles ou non. Cependant, je ne sais pas si cela est nécessaire.

class App extends Component {
  state = {
    TodoList: {},
  };

  componentWillMount() {
    axios.get("http://localhost:5001/1").then((response) => {
      this.setState({
        TodoList: response.data,
      });
    });
  }

  render() {
    console.log(this.state);
    return <h1>hello </h1>;
  }
}

Voici ce que je vois dans la console:

reactjs

2 commentaires

Si vous ne savez pas pourquoi la méthode de rendu est appelée deux fois ou plus de fois, vous pouvez utiliser l'API Profiler de React - reactjs.org/blog/2018/09/10/introducing-the-react-profiler.h‌ tml Le profileur de React est vraiment utile pour faire de votre composant react meilleures performances.

Je recommanderais de lire attentivement la documentation officielle de React.js afin de vous familiariser avec le fonctionnement des choses.

3 Réponses :

3
votes

C'est parfaitement normal.

Votre flux de composants App comme ci-dessous:

Exécutez la méthode render pour charger le composant
exécuter des codes dans componentDidMount
Appel de axios.get qui est une opération asynchrone
Recevoir les données de l'étape 2, mettre à jour l'état du composant en utilisant this.setState
App a détecté une mise à jour de l'état, exécutez donc la méthode render pour charger à nouveau le composant

Par conséquent, vous devez absolument gérer le cas où this.state.TodoList n'a pas de données, ce qui s'est produit au premier chargement

< UPDATES:

Le cycle de vie des composants componentWillMount est désormais obsolète, ce qui signifie que vous ne devriez plus l'utiliser. Remplacez-le par componentDidMount à la place. Fonctionnellement, ils ne devraient pas faire de différence dans votre exemple

1 commentaires

J'ai créé une fonction qui évalue if (this.state.TodoList) et renvoie l'objet en fonction de la condition.

0
votes

Remarque: componentWillMount est obsolète et fonctionnera jusqu'à la version 17.

Source - https://reactjs.org/docs/react-component.html #unsafe_componentwillmount

Cycle de vie React le plus approprié pour appeler des API: componentDidMount est la méthode la plus préférée pour effectuer des tâches asynchrones telles que les appels d'API, setTimeouts, etc.

Cela fonctionnera comme -

Sur componentDidMount , votre API est appelée
Selon l'ordre du cycle de vie, la dernière méthode de rendu sera appelée. (Still API n'a pas retourné de réponse). Votre interface utilisateur est affichée lors de la peinture initiale.
Une fois que l'API obtient la réponse, vous utilisez this.setState () qui forcera une opération de rendu.
Encore une fois, les modifications apportées à votre interface utilisateur sont mises à jour

N'oubliez pas: this.setState () ne sera appelé qu'une seule fois, que vous l'ayez appelé une ou plusieurs fois dans la méthode du cycle de vie

0 commentaires

1
votes

Initialement, la méthode de rendu est appelée après la méthode cwm. Ainsi, le journal de la console affiche la valeur vide de l'état pour la première fois.
Mais vous avez exécuté une opération asynchrone dans la méthode cwm, donc une fois que c'est fait, la méthode setstate est appelée, ce qui provoque la réexécution de la méthode de rendu.

Remarque: les méthodes d'accessoires ComponentWillMount, componentWillUpdate et componentWillUpdate sont obsolètes.

Vous devez déplacer cet appel d'API vers la méthode componentDidmount ou ComponentDidUpdate.

Cependant, après cela, le journal de votre console apparaîtra deux fois: un pour le rendu initial et un deuxième pour setstate appelé après l'appel d'API.

0 commentaires