如何使用 useEffect 正确地在数组中获取和保存数据答案

【问题标题】：How correctly fetch and save data inside an array using useEffect如何使用 useEffect 正确地在数组中获取和保存数据
【发布时间】：2021-09-24 04:01:00
【问题描述】：

我正在使用 React 并使用 useEffect 从区块链异步获取数据。我不明白的是，虽然 map 函数中的 console.log 工作并且打印了正确的数据，但它应该将该数据保存在数据数组中，但是当我在地图之外记录数据时（这意味着它应该已经完成保存数据）我得到一个未定义值的数组。代码：

  useEffect(() => {
    const data = mainnet.Vaults.map((pool) => {
      const loadLendingData = async () => {
        const dataPool = await getPoolInfo(pool);
        console.log('dataPool', dataPool) //all good it prints everything
        return dataPool
      };
      loadLendingData();
     })
     console.log('data', data) //[undefined, undefined, undefined and so on]  
     setData(data)
  }, []);

为什么会这样？我做错了什么？

编辑：我通过使用 useState 为地图中的每个循环存储数据来解决问题。代码：

  useEffect(() => {
    mainnet.Vaults.map((pool) => {
      const loadLendingData = async () => {
        const dataPool = await getPoolInfo(pool);
        setLendingData((prevPool) => [...prevPool, dataPool])
      };
      loadLendingData();
     })
  }, []);

但我仍然想了解为什么第一个示例不起作用。

【问题讨论】：

您的地图回调不返回任何内容。此外，该过程是异步的，因此无论如何此时结果值都不可用。
你说得对，我完全错过了

标签： reactjs fetch mapping use-effect

【解决方案1】：

我发现您没有从 map 函数返回任何内容，这就是数组在 map 函数之外有未定义元素的原因。

return loadLendingData()

这应该可以为您解决问题。

【讨论】：