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

Posted 2023-03-17

【中文标题】如何使用 useEffect 正确地在数组中获取和保存数据

【英文标题】：How correctly fetch and save data inside an array using 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();
     )
  , []);

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

【问题讨论】：

您的地图回调不返回任何内容。此外，该过程是异步的，因此无论如何此时结果值都不可用。

你说得对，我完全错过了

【参考方案1】：

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

return loadLendingData()

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