如何使用 UseEffect 在加载功能组件时运行多个查询并在渲染方法中获取结果？

Question

我有以下功能组件，在加载组件时，它需要遍历一个数组并运行一些异步查询来填充一个我想在渲染方法中显示的新数组。

     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>
  );
  };

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

谢谢！

Answer 1

您没有使用 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);
 });

 }, []);