Utilisez React Hooks pour demander des données et rendre

Préface

Dans le développement quotidien, l'obtention et le rendu des données de manière asynchrone à partir du serveur est une opération à très haute fréquence. Lors de l'utilisation de composants React Class dans le passé, ce type d'opération nous est déjà familier, c'est-à-dire via ajax dans le componentDidMount du composant Class pour obtenir des données et setState pour déclencher les mises à jour des composants.

Avec l'avènement de Hook, nous pouvons utiliser l'écriture Hook pour remplacer l'écriture de classe dans certains scénarios. Mais il n'y a pas de fonctions telles que setState et componentDidMount dans Hook. Comment pouvons-nous obtenir des données de manière asynchrone du serveur et les rendre? Cet article présentera comment utiliser la nouvelle fonctionnalité Hook de React pour écrire des composants et obtenir le rendu des données.

Rendu des données

Regardons d'abord une simple démonstration du rendu des données

import React, {
    
     useState } from 'react';
 
function App() {
    
    
  const [data, setData] = useState({
    
     products: [{
    
    
	productId: '123',
	productName: 'macbook'
	}] });
 
  return (
    <ul>
      {
    
    data.products.map(i => (
        <li key={
    
    i.productId}>
          {
    
    i.productName}
        </li>
      ))}
    </ul>
  );
}
 
export default App;

Dans la démo, dataun état interne est créé via useState , dans lequel se trouvent des données de liste de produits pour stocker les données de produit. Le composant App restitue les données de la liste de produits sur la page via les produits dans les données.

Mais maintenant, ce sont des données codées en dur. Si nous prévoyons d'obtenir des données du serveur et de les rendre, nous devons récupérer les données du serveur lorsque le rendu du composant est terminé, puis changer l'état pour déclencher le rendu via setData. Nous nous sommes ensuite préparés à utiliser axiospour obtenir les données.

import React, {
    
     useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
    
    
  const [data, setData] = useState({
    
     products: [{
    
    
	productId: '123',
	productName: 'macbook'
	}] });
 
  useEffect(async () => {
    
    
    const result = await axios(
      'https://c.com/api/products?date=today',
    );
 
    setData(result.data);
  });
 
  return (
    <ul>
      {
    
    data.products.map(i => (
        <li key={
    
    i.productId}>
          {
    
    i.productName}
        </li>
      ))}
    </ul>
  );
}
 
export default App;

Ce qui est utilisé dans le code useEffectest l'un des hooks appelés effect hook. useEffect sera déclenché à chaque fois que le composant sera rendu, nous l'utilisons pour obtenir des données et mettre à jour l'état. Mais le code ci-dessus est défectueux, l'avez-vous trouvé?

Oui, tant que vous l'exécutez, vous constaterez que le programme est entré dans une boucle sans fin. Parce que useEffect n'est pas seulement déclenché lorsque le composant didMounts, mais également lorsque le composant didUpdate. Une fois les données obtenues dans useEffect, l'état est modifié via setDate, qui déclenche la mise à jour du rendu du composant, qui entre à nouveau dans useEffect et la boucle se poursuit indéfiniment. Ce n'est pas le résultat que nous voulons. Ce que nous voulions au début était d'obtenir les données une fois pendant didMounts. Par conséquent, dans ce cas, nous devons passer un vide [] au deuxième paramètre de la méthode useEffect, de sorte que la logique dans useEffect ne soit exécutée que lorsque le composant didMounts.

import React, {
    
     useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
    
    
  const [data, setData] = useState({
    
     products: [{
    
    
	productId: '123',
	productName: 'macbook'
	}] });
 
  useEffect(async () => {
    
    
    const result = await axios(
      'https://c.com/api/products?date=today',
    );
 
    setData(result.data);
  },[]);  //重点
 
  return (
    <ul>
      {
    
    data.products.map(i => (
        <li key={
    
    i.productId}>
          {
    
    i.productName}
        </li>
      ))}
    </ul>
  );
}
 
export default App;

Bien qu'il semble que cette erreur soit de niveau relativement faible, il s'agit en fait d'un problème que beaucoup de gens posent souvent lorsqu'ils sont nouveaux dans le crochet.

Bien entendu, le deuxième paramètre de useEffect peut également être passé dans une valeur. Lorsqu'il y a des valeurs, useEffect se déclenchera lorsque ces valeurs seront mises à jour. S'il ne s'agit que d'un tableau vide, il ne se déclenchera que lorsque didMounts.

De plus, lors de l'implémentation de ce code, vous verrez l'avertissement de la console Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.. Donc, si vous souhaitez utiliser async, vous devez modifier le libellé.

import React, {
    
     useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
    
    
  const [data, setData] = useState({
    
     products: [{
    
    
	productId: '123',
	productName: 'macbook'
	}] });
 
  useEffect(() => {
    
    
  	const fetchData = async()=>{
    
    
	  	const result = await axios(
	      'https://c.com/api/products?date=today',
	    );
	    setData(result.data);
  	}
 	fetchData();
  },[]); 
 
  return (
    <ul>
      {
    
    data.products.map(i => (
        <li key={
    
    i.productId}>
          {
    
    i.productName}
        </li>
      ))}
    </ul>
  );
}
 
export default App;

Optimisation de l'expérience

Dans les applications générales, le chargement est ajouté à la conception d'interaction de certains processus de demande pour soulager l'anxiété de l'utilisateur. Comment le réaliser dans l'écriture de Hook? Il sera présenté ci-dessous.

import React, {
    
     useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
    
    
  const [data, setData] = useState({
    
     products: [{
    
    
	productId: '123',
	productName: 'macbook'
	}] });
  const [isLoading, setIsLoading] = useState(false);
 
  useEffect(() => {
    
    
  	const fetchData = async()=>{
    
    
  		setIsLoading(true);
	  	const result = await axios(
	      'https://c.com/api/products?date=today',
	    );
	    setData(result.data);
	    setIsLoading(false);
  	}
 	fetchData();
  },[]); 
 
  return (
  {
    
    isLoading ? (
        <div>Loading ...</div>
      ) : (
    <ul>
      {
    
    data.products.map(i => (
        <li key={
    
    i.productId}>
          {
    
    i.productName}
        </li>
      ))}
    </ul>
  )};
}
 
export default App;

Ceci est réalisé en ajoutant un état appelé isLoading. Nous modifions la valeur de isLoading au début et à la fin de la récupération pour contrôler le contenu du composant retourné par retour, de sorte que le composant Chargement soit affiché avant la demande, et la liste des produits soit affichée après la demande.

La gestion des erreurs

Le processus de demande échoue souvent pour diverses raisons, telles que des erreurs de réseau et de serveur. La gestion des erreurs est donc essentielle.

import React, {
    
     useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
    
    
  const [data, setData] = useState({
    
     products: [{
    
    
	productId: '123',
	productName: 'macbook'
	}] });
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
 
  useEffect(() => {
    
    
  	const fetchData = async()=>{
    
    
  	    setIsError(false);
  		setIsLoading(true);

		try{
    
    
			const result = await axios(
		      'https://c.com/api/products?date=today',
		    );
	    	setData(result.data);
		}catch(e){
    
    
			setIsError(true);
		}
	    setIsLoading(false);
  	}
 	fetchData();
  },[]); 
 
  return (
  <div>
	{
    
    isError && <div>出错了...</div>}
	{
    
    isLoading ? (
        <div>Loading ...</div>
      ) : (
    <ul>
      {
    
    data.products.map(i => (
        <li key={
    
    i.productId}>
          {
    
    i.productName}
        </li>
      ))}
    </ul>
  )};
  </div>
  
}
 
export default App;

Lorsqu'une erreur se produit dans la demande, la valeur isErrorest true. Lorsque le rendu est déclenché, le composant de notification d'erreur est rendu. Le traitement ici est relativement simple: dans un scénario réel, vous pouvez ajouter une logique plus complexe à la gestion des erreurs. isErrorIl sera réinitialisé à chaque exécution du hook.

Enfin

Après avoir lu ceci, vous avez essentiellement appris à utiliser React Hooks pour obtenir des données et rendre des composants.