React：如何在更新状态之前等待地图功能完成？

Question

我有一个 ID 数组，存储在 ids 中，我正在映射异步函数 asyncFunc。我想将映射结果存储到 newArr 中，然后通过 setState 更新状态。这是我的代码：

useEffect(() => {
    const newArr = [];
    ids.map((element) => {
      asyncFunc(variables).then((data) => {
        newArr.push({ layer: makeLayer(data) });
      });
    });
    setState([...layers, ...newArr]);
  }, [variables]);

我的问题是状态在映射完成之前正在更新。 如何仅在返回所有映射的数据时使用 .then() 更新状态？ 用 Promise.all 包装 ids.map 无效。另外，下面returns一个错误：

useEffect(() => {
    const newArr = [];
    (ids.map((element) => {
      asyncFunc(variables).then((data) => {
        newArr.push({ layer: makeLayer(data) });
      });
    })).then(()=> {
       setState([...layers, ...newArr]);    
    })
  }, [variables]);

Answer 1

声明一个异步函数来填充数组，return 您的数组在 Promise.all 中。像这样的东西应该适用于你想要完成的事情：

useEffect(() => {
    const populateArray = async () => {
      const newArr = await Promise.all(ids.map(async element => {
        const data = await asyncFunc(variables)

        return { layer: makeLayer(data) }
      })

      setState([...layers, ...newArr]);
    }

    populateArray()
  }, [variables]);

React：如何在更新状态之前等待地图功能完成？

React: how to wait for map function to complete before updating state?

javascript

reactjs

react-native

asynchronous

async-await