Use React Hooks para solicitar dados e renderizar

Prefácio

No desenvolvimento diário, obter e renderizar dados de forma assíncrona do servidor é uma operação de frequência muito alta. Ao usar componentes React Class no passado, essa operação já é familiar para nós, ou seja, por meio de ajax no componentDidMount do componente Class para obter dados e setState para acionar atualizações de componentes.

Com o advento do Hook, podemos usar a escrita Hook para substituir a escrita Class em alguns cenários. Mas não há funções como setState e componentDidMount no Hook. Como podemos obter e renderizar dados de forma assíncrona do servidor? Este artigo apresentará como usar o novo recurso Hook do React para escrever componentes e obter renderização de dados.

Renderização de dados

Vejamos primeiro uma demonstração simples de renderização de dados

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;

Na demonstração, dataum estado interno é criado por meio de useState , no qual há dados da lista de produtos para armazenar dados do produto. O componente App renderiza os dados da lista de produtos para a página por meio dos produtos nos dados.

Mas agora são dados codificados permanentemente. Se esperamos obter os dados do servidor e renderizá-los, precisamos buscar os dados do servidor quando a renderização do componente estiver concluída e, em seguida, alterar o estado para acionar a renderização por meio de setData. Em seguida, nos preparamos para usar axiospara obter os dados.

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;

O que é usado no código useEffecté um dos ganchos chamados effect hook. useEffect será acionado sempre que o componente renderizar, nós o usamos para obter dados e atualizar o estado. Mas o código acima tem falhas, você o encontrou?

Sim, desde que você o execute, você descobrirá que o programa entrou em um loop infinito. Porque useEffect não é disparado apenas quando o componente didMounts, mas também quando o componente didUpdate. Depois que os dados são obtidos em useEffect, o estado é alterado por meio de setDate, que dispara a atualização de renderização do componente, que insere o useEffect novamente e o loop continua indefinidamente. Este não é o resultado que desejamos. O que queríamos no início era obter os dados uma vez durante o didMounts. Portanto, neste caso, devemos passar um vazio [] para o segundo parâmetro do método useEffect, para que a lógica em useEffect só seja executada quando o 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;

Embora pareça que esse erro seja de nível relativamente baixo, é de fato um problema que muitas pessoas costumam fazer quando são novas no uso de hooking.

Obviamente, o segundo parâmetro de useEffect também pode ser passado em um valor. Quando houver valores, useEffect será acionado quando esses valores forem atualizados. Se for apenas um array vazio, ele só irá disparar quando didMounts.

Além disso, a implementação deste código, você verá o aviso do console Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.. Portanto, se você deseja usar assíncrono, é necessário modificar o texto.

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;

Otimização de experiência

Em aplicativos gerais, o carregamento é adicionado ao design de interação de certos processos de solicitação para aliviar a ansiedade do usuário. Como perceber isso na escrita de Hook? Isso será apresentado a seguir.

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;

Isso é obtido adicionando um estado chamado isLoading. Alteramos o valor de isLoading no início e no final da busca para controlar o conteúdo dos componentes retornados por retorno, de modo que o componente de carregamento seja exibido antes da solicitação e a lista de produtos seja exibida após a solicitação.

Manipulação de erros

O processo de solicitação geralmente falha devido a vários motivos, como erros de rede e de servidor. Portanto, o tratamento de erros é essencial.

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;

Quando houver um erro na solicitação, ele isErrorserá definido como verdadeiro. Quando a renderização for acionada, o componente de notificação de erro será renderizado. O processamento aqui é relativamente simples.Em um cenário real, você pode adicionar uma lógica mais complexa para o tratamento de erros. isErrorEle será reiniciado sempre que o gancho for executado.

Finalmente

Depois de ler isto, você basicamente aprendeu como usar React Hooks para obter dados e renderizar componentes.