如何从 api 加载数据并使用 map 函数异步加载组件

Question

我的后端数据库存储了数百个产品，我想以异步方式将它们列出给前端反应用户，而不用等到所有数据都加载完毕。虽然我使用 api 兑现，但它仍然需要几秒钟才能将产品列表映射到组件。

我使用带有 axios 和 async/wait 函数的 useAPI 钩子从 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;

Answer 1

首先，您可能需要对您的请求进行分页..

您可以创建一个 'cache' 添加状态到 您的挂钩 。此外，您还需要在内部创建一个函数，以便随时发出请求。

还添加一个名为 fetchData 的函数到您的挂钩（如果它不存在的话）。

Return 还有那个 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>
);

如何从 api 加载数据并使用 map 函数异步加载组件

How to load data from api and load component asynchronously with map function

asynchronous

data-caching

reactjs

axios

react-hooks