Utilice React Hooks para solicitar datos y renderizar

Prefacio

En el desarrollo diario, obtener y representar datos de forma asíncrona desde el servidor es una operación de muy alta frecuencia. Cuando usamos componentes de React Class en el pasado, esta operación ya nos es familiar, es decir, a través de ajax en el componente componentDidMount del componente Class para obtener datos y setState para activar actualizaciones de componentes.

Con la llegada de Hook, podemos usar la escritura Hook para reemplazar la escritura Class en algunos escenarios. Pero no hay funciones como setState y componentDidMount en Hook. ¿Cómo podemos obtener datos de forma asincrónica del servidor y renderizarlos? Este artículo presentará cómo usar la nueva función Hook de React para escribir componentes y obtener la representación de datos.

Representación de datos

Primero veamos una demostración simple de procesamiento de datos

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;

En la demostración, datase crea un estado interno a través de useState , en el que hay una lista de datos de productos para almacenar datos de productos. El componente Aplicación muestra los datos de la lista de productos en la página a través de los productos en los datos.

Pero ahora son datos codificados. Si esperamos obtener los datos del servidor y renderizarlos, necesitamos obtener los datos del servidor cuando la renderización del componente esté completa, y luego cambiar el estado para activar la renderización a través de setData. Luego nos preparamos para usar axiospara obtener los datos.

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;

Lo que se usa en el código useEffectes uno de los ganchos llamados effect hook. useEffect se activará cada vez que se procese el componente, lo usamos para obtener datos y actualizar el estado. Pero el código anterior es defectuoso, ¿lo ha encontrado?

Sí, mientras lo ejecute, encontrará que el programa ha entrado en un ciclo sin fin. Porque useEffect no solo se activa cuando el componente didMounts, sino también cuando el componente didUpdate. Una vez que se obtienen los datos en useEffect, el estado se cambia a través de setDate, que desencadena la actualización de representación del componente, que ingresa de nuevo a useEffect y el ciclo continúa indefinidamente. Este no es el resultado que queremos. Lo que queríamos originalmente era obtener los datos una vez durante didMounts. Por lo tanto, en este caso, debemos pasar un [] vacío al segundo parámetro del método useEffect, para que la lógica en useEffect solo se ejecute cuando el componente 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;

Aunque parece que este error es de nivel relativamente bajo, de hecho es un problema que muchas personas suelen cometer cuando son nuevas en el enganche.

Por supuesto, el segundo parámetro de useEffect también se puede pasar en un valor. Cuando hay valores, useEffect se activará cuando se actualicen estos valores. Si es solo una matriz vacía, solo se activará cuando didMounts.

Además, la implementación de este código, verá la advertencia de la consola Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.. Entonces, si desea utilizar async, debe modificar la redacción.

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;

Optimización de experiencias

En aplicaciones generales, la carga se agrega al diseño de interacción de ciertos procesos de solicitud para aliviar la ansiedad del usuario. ¿Cómo realizarlo en la escritura de Hook? Se presentará a continuación.

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;

Esto se logra agregando un estado llamado isLoading. Cambiamos el valor de isLoading al principio y al final de la recuperación para controlar el contenido de los componentes devueltos por devolución, de modo que el componente Cargando se muestre antes de la solicitud y la lista de productos se muestre después de la solicitud.

Manejo de errores

El proceso de solicitud a menudo falla debido a varias razones, como errores de red y del servidor. Entonces, el manejo de errores es esencial.

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;

Cuando haya un error en la solicitud, se isErrorestablecerá en verdadero. Cuando se active la representación, se procesará el componente de notificación de error. El procesamiento aquí es relativamente simple. En un escenario real, puede agregar una lógica más compleja al manejo de errores. isErrorSe restablecerá cada vez que se ejecute el gancho.

Al final

Después de leer esto, básicamente ha aprendido a usar React Hooks para obtener datos y renderizar componentes.