Tengo una matriz de ID, almacenada en ids , que estoy mapeando sobre una función asíncrona, asyncFunc . Quiero almacenar el resultado de la asignación en newArr y luego actualizar el estado a través setState . Aquí está mi código:
useEffect(() => { const newArr = []; ids.map((element) => { asyncFunc(variables).then((data) => { newArr.push({ layer: makeLayer(data) }); }); }); setState([...layers, ...newArr]); }, [variables]); Mi problema es que el estado se actualiza antes de que se complete el mapeo. ¿Cómo puedo usar .then() para actualizar el estado solo cuando se devolvieron los datos de todas las asignaciones? Envolver ids.map con Promise.all no funcionó. Además, lo siguiente devuelve un error:
useEffect(() => { const newArr = []; (ids.map((element) => { asyncFunc(variables).then((data) => { newArr.push({ layer: makeLayer(data) }); }); })).then(()=> { setState([...layers, ...newArr]); }) }, [variables]);Declare una función asíncrona para llenar la matriz y devolver su matriz dentro de Promise.all . Algo como esto debería funcionar para lo que estás tratando de lograr:
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]);