时间戳

首页 > 解决方案 > 如何从api加载数据并使用map函数异步加载组件

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

问题描述

我的后端数据库存储了数百个产品，我想以异步方式将它们列出给前端响应用户，而无需等到所有数据都加载完毕。虽然我使用 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;

标签： reactjsasynchronousaxiosreact-hooksdata-caching

解决方案

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

您可以创建一个“缓存”，为您的钩子添加一个状态。此外，您还需要在内部创建一个函数以随时发出请求。

还添加一个名为的函数，即添加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>
);

推荐阅读