React:如何等待map函数完成后才更新状态?

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不起作用。另外，下面的语句返回一个错误:

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

Answer 1

声明一个async函数来填充数组并在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]);