Javascript 如何使用UseEffect在加载功能组件时运行多个查询，并在render方法中获得结果？

我有以下功能组件，在加载该组件时，它需要循环通过一个数组并运行一些异步查询，以确定我要在render方法中显示的新数组的日期

     import React, { useEffect, useState, useContext } from 'react';
     import { AccountContext } from '../../../../providers/AccountProvider';
     import { GetRelationTableCount } from '../../../../api/GetData';
     import { getTableAPI } from '../../../../api/tables';

  const RelatedRecordsPanel = (props) => {
  const { userTokenResult } = useContext(AccountContext);
  const { dataItem } = props;

  const [relatedTableItems, setRelatedTableItems] = useState([]);

   useEffect(() => {
      const tempArray = [];
      const schema = `schema_${userTokenResult.zoneId}`;
      const fetchData = async () => {

     return Promise.all(
        dataItem.tableinfo.columns
        .filter((el) => el.uitype === 1)
        .map(async (itm) => {
          const tblinfo = await getTableAPI(itm.source.lookuptableid);
          const tblCount = await GetRelationTableCount(
           dataItem.tableid,
          itm.source.jointable,
          schema,
        );

        const TableIconInfo = { name: tblinfo.name, icon: tblinfo.icon, count: tblCount };
        tempArray.push(TableIconInfo);

      })

  );
};
 fetchData();
setRelatedTableItems(tempArray)
 }, []);

  return (
     <div>
       {relatedTableItems.length > 0 ? <div>{relatedTableItems.name}</div> : null}
  </div>
  );
  };

import React，{useffect，useState，useContext}来自“React”；
从“../../../../providers/AccountProvider”导入{AccountContext}；
从“../../../api/GetData”导入{GetRelationTableCount}；
从“../../../../api/tables”导入{getTableAPI}；
const RelatedRecordsPanel=（道具）=>{
const{userTokenResult}=useContext（AccountContext）；
const{dataItem}=props；
const[relatedTableItems，setRelatedTableItems]=useState（[]）；
useffect（（）=>{
常量tempArray=[]；
const schema=`schema_${userTokenResult.zoneId}`；
const fetchData=async（）=>{
回报你的承诺(
dataItem.tableinfo.columns
.filter（（el）=>el.uitype==1）
.map（异步（itm）=>{
const tblinfo=await getTableAPI（itm.source.lookuptableid）；
const tblCount=等待GetRelationTableCount(
dataItem.tableid，
itm.source.jointable，
模式，
);
const TableIconInfo={name:tblinfo.name，icon:tblinfo.icon，count:tblCount}；
tempArray.push（TableIconInfo）；
})
);
};
fetchData（）；
setRelatedTableItems（临时数组）
}, []);
返回(
{relatedTableItems.length>0？{relatedTableItems.name}:null}
);
};

在上面的代码中，查询运行正常，如果我在循环中执行console.log，我可以看到是否可以很好地获取数据，但是，数组总是[]，并且没有数据呈现。如何编写此异步代码，使其完成查询以填充数组，以便正确渲染

---

谢谢

您没有使用Promise.all的返回值，而且由于您的所有API都是异步的，因此tempArray不会在您希望将其设置为状态的时间内填充

您可以像下面这样通过等待Promise.all结果并使用响应来更新它

useEffect(() => {
      const schema = `schema_${userTokenResult.zoneId}`;
      const fetchData = async () => {

     return Promise.all(
        dataItem.tableinfo.columns
        .filter((el) => el.uitype === 1)
        .map(async (itm) => {
          const tblinfo = await getTableAPI(itm.source.lookuptableid);
          const tblCount = await GetRelationTableCount(
           dataItem.tableid,
          itm.source.jointable,
          schema,
        );

        const TableIconInfo = { name: tblinfo.name, icon: tblinfo.icon, count: tblCount };
        return TableIconInfo;

      })

  );
};
 fetchData().then((res) => {
     setRelatedTableItems(res);
 });

 }, []);

---

Thx，这很有效！我还通过改变useffect（async（））然后使用wait fetchData（）使其工作；setRelatedTableItems（tempArray）在end.BTW，您不应该使useEffect异步，它将向您发出警告。