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

Question

我正在使用 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();
     })
  }, []);

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

Answer 1

我看到你没有从 map 函数返回任何东西，这就是数组在 map 函数之外有未定义元素的原因。

return loadLendingData()

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

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

How correctly fetch and save data inside an array using useEffect

mapping

fetch

reactjs

use-effect