Как загрузить данные из API и асинхронно загрузить компонент с помощью функции карты

В моей серверной базе данных хранятся сотни продуктов, и я хочу перечислить их пользователю внешнего интерфейса асинхронно, не дожидаясь загрузки всех данных. хотя я использую кэширование API, но сопоставление списка продуктов с компонентами все еще занимает несколько секунд.

Я использую хук useAPI с функцией axios и async/wait для извлечения данных из API.

Есть ли способ улучшить загрузку и сделать так, чтобы компонент периодически обновлялся? Как я могу кэшировать данные во внешнем интерфейсе, чтобы избежать перегрузок для базы данных?

import React from "react";
import useAPI from '../../api/useAPI'
import { ProductsListWrap, ProductCard } from '../../components'

const ProductsList = (props) => {

   const handleSelect = (data) => {
      console.log(data)
   };
   
   const [products, loading, error, retry] = useAPI('/api/v1/products');
   return (
   <ProductsListWrap>
            {products.map((data, i) => {
              return (
                <ProductCard
                  handleSelect={() => handleSelect(data)}
                  key={i}
                  {...data}
                />
              );
            })}
    </ProductsListWrap>
  );
};

export default ProductsList;

reactjs asynchronous react-hooks axios data-caching
person elhirach abderrazzak    schedule 25.02.2021    source источник
comment
Здравствуйте! Пробовали ли вы использовать useState или состояния редукса для хранения и добавления загруженных продуктов?   -  person qafoori    schedule 25.02.2021

Ответы (1)


arrow_upward
0
arrow_downward

Во-первых, вам, вероятно, нужно разбить ваши запросы на страницы.

Вы можете создать «кеш», добавив состояние в ваш хук. Также вам нужно будет создать функцию внутри, чтобы сделать запрос, когда захотите.

Добавьте также вызываемую функцию, т. е. fetchData, в свой хук (если она еще не существует).

Верните также эту функцию fetchData.

function yourHook() {
  const [cache, setCache] = useState();

  function fetchData() {
    if (!cache) {
      // your axios logic
      setCache(response);
    }
  }

  ...

  return [fetchData, cache, loading, error, retry];
}

Вызовите fetchData в вашем компоненте (обратите внимание, что теперь products равно cache):

const [fetchData, products, loading, error, retry] = useAPI('/api/v1/products');

useEffect(() => {
  fetchData();
}, []);

return (
  <ProductsListWrap>
    {products && products.map...}
  </ProductsListWrap>
);
person AdriSolid    schedule 25.02.2021