为啥我在使用 useEffect 从区块链获取数据时会得到一系列 Promise？

Posted 2023-03-17

【中文标题】为啥我在使用 useEffect 从区块链获取数据时会得到一系列 Promise？

【英文标题】：Why do I get an array of promises when getting data from the blockchain with useEffect?为什么我在使用 useEffect 从区块链获取数据时会得到一系列 Promise？

【发布时间】：2021-09-24 07:48:33

【问题描述】：

我正在使用 React 并使用 useEffect 从区块链获取数据，但问题是，在我映射数据并将其放入借贷数据数组之后，当记录它时，它会返回一个承诺数组。 代码：

   const data = mainnet.Vaults.map((pool) => 
      const loadLendingData = async () => 
        const dataPool = await getPoolInfo(pool);
        // setLendingData((prevPool) => [...prevPool, dataPool]);
        return dataPool
      ;
      return loadLendingData();
    );
    setLendingData(data)
    setLoading(false);
  

如果我在拉取数据时使用了等待，为什么会得到承诺？

【问题讨论】：

显示getPoolInfo，以便我们更好地为您提供帮助

一般来说，当你从这样的 API 加载东西时，你只能在异步函数 inside 中使用状态设置器（否则设置器会在异步操作完成之前运行） .您注释掉的行看起来应该可以工作，当您使用它时会发生什么？此外，对于多个异步操作，您需要 for - await 循环或 Promise.all

是的，注释行起作用并将数据保存在数组中，每个循环一个项目。而且我不明白循环内的 setter 是否有效，但即使我正在等待数据，循环外也会返回一系列承诺。那么，您的意思是循环外的 setLendingData(data) 运行并保存承诺而不等待解决？但在那种情况下，为什么会发生这种情况？当我在循环中返回 dataPool 时，promise 应该已经解决了，因为 dataPool 正在等待 getPoolInfo(pool)，对吗？如果是这种情况，则返回的 dataPool 已经解析。

【参考方案1】：

看起来您应该使用map 创建一个promises 数组，然后您可以使用await 和Promise.all。

const promises = mainnet.Vaults.map(pool => getPoolInfo(pool));

const data = await Promise.all(promises);

setLendingData(data);

【参考方案2】：

函数 loadLendingData 正在返回一个 promise，而 map 函数没有等待它得到解决。

   const data = mainnet.Vaults.map((pool) => 
  const loadLendingData = async () => 
    const dataPool = await getPoolInfo(pool);
    // setLendingData((prevPool) => [...prevPool, dataPool]);
    return dataPool
  ;
  return loadLendingData;
);
const res = Promise.all[data]
setLendingData(res)
setLoading(false);