如何在 React js 中渲染功能组件之前获取数据

Posted 2023-02-22

【中文标题】如何在 React js 中渲染功能组件之前获取数据

【英文标题】：How to fetch data before render functionnal component in react js

【发布时间】：2022-01-18 05:50:11

【问题描述】：

在我的代码下面，我想在开始渲染组件之前检索所有数据，有什么方法可以在 react 中做到这一点？我想这可能是一个简单的代码行，但由于我是编码新手，我仍然不知道所有反应组件的行为。谢谢你的回答。

import  useState, useEffect  from "react";
import axios from "axios";
import Cookies from "js-cookie";
// import material ui
import CircularProgress from "@mui/material/CircularProgress";
import Box from "@mui/material/Box";
// import config file
import  SERVER_URL  from "../../configEnv";

const Products = ( catList ) => 
  // catList is data coming from app.js file in format Array[objects...]
  console.log("catList ==>", catList);
  const [isLoading, setIsLoading] = useState(true);
  const [dataSku, setDataSku] = useState([]);

  console.log("datasku ==>", dataSku);

  const tab = [];
  useEffect(() => 
    // Based on the catList tab I fetch additionnal data linked with each object of catList array
    catList.slice(0, 2).forEach(async (element) => 
      const  data  = await axios.post(`$SERVER_URL/products`, 
        product_skus: element.product_skus,
      );

      // The result I receive from the call is an array of objects that I push inside the Tab variable
      tab.push( name: element.name, content: data );
      setDataSku(tab);
      console.log("tab ==>", tab);
      setIsLoading(false);
    );
  , [catList]);

  return isLoading ? (
    <Box sx= display: "flex" >
      console.log("there")
      <CircularProgress />
    </Box>
  ) : (
    <div className="products-container">
      <div>LEFT BAR</div>
      <div>
        dataSku.map((elem) => 
          return (
            <div>
              <h2>elem.name</h2>
            </div>
          );
        )
      </div>
    </div>
  );
;

export default Products; ```

【问题讨论】：

如果你只获取一次数据，你的 useEffect() 钩子中需要一个空的依赖数组。

感谢您的回答，但是通过删除catList的依赖，useEffect内容不会被触发

您是否有机会更改 api 以便能够在一个请求中获取所有内容？执行异步 api 调用的 for 循环并不是最佳实践，因为它会引入多个故障点并增加网络流量

不幸的是我没有api ????所以我必须为每个 cat = category 请求调用

【参考方案1】：

@Jessy 使用您的加载状态一次获取数据，

在你的useEffect中，检查加载，

useEffect(() => 
  if(loading) 
    catList.slice(0, 2).forEach(async (element) => 
      const  data  = await axios.post(`$SERVER_URL/products`, 
        product_skus: element.product_skus,
      );
      tab.push( name: element.name, content: data );
      setDataSku(tab);
      console.log("tab ==>", tab);
      setIsLoading(false);
    );
   
  , [catList]);`

【讨论】：

非常感谢您的回答，但是当我有这个 isLoading 条件似乎有点好但并非所有数据都被调用（通常应该调用 223）时，我的 html 中显示的结果有时是随机的有时仅 1 个数据有时 5 个数据 8 ...但每次页面刷新时不会显示 223 个结果。但是从我的控制台我可以看到我将所有 223 请求的结果存储在变量选项卡中

【参考方案2】：

我终于设法通过在 isLoading 上添加此条件来显示所有结果

if (tab.length === catList.length) 
          setIsLoading(false);
        

非常感谢你们的洞察力:)