Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

106
Vistas
After Promise object not rendering

I have been trying to display map an array after resolving its promise. Unfortunately, it is not being rendered. Here is the code:

<View>
     {array.map((item) => {
        promiseFunction(item).then((res) => {
          return (
            <FunctionalComponent
             prop={res.prop}
            />
          );
        });
      })}
</View>
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

You can't do that directly as you are trying to since React will try to render an array of promises and when they have resolved it's too late the Component has already rendered. Previous answers showd you how to set to state the results once they come and render only after the promises are fulfilled. But with React@18 you could jump that step and render the promises almost directly. If you are using Suspense, there is a way to handle this kind of scenarios, because Suspended components are able to consume promises directly and to render a fallback until they resolve:

const arr = [1, 2, 3, 4, 5];

export default function App() {
  return (
    <Suspense fallback={<p>Loading.....</p>}>
      <AsyncComponent />
    </Suspense>
  );
}

export const AsyncComponent = () => {
  // THIS IS AN ARRAY OF PROMISES

  const data = arr.map((el, i) => {
    const d = useGetData(`https://jsonplaceholder.typicode.com/todos/${i + 1}`);
    console.log(d);
    return (
      <h5>
        {i + 1}:{d?.title}
      </h5>
    );
  });
  // HERE YOU RENDER THE PROMISES DIRECTLY
  return <div>{data}</div>;
};

A demo that you can play with, HERE.

about 4 years ago · Juan Pablo Isaza Denunciar

0

Array.prototype.map() won't wait for Promise to resolve, so data will never be rendered. You should try classic for ... of.

const Foo = ({}) => {
  const [components, setComponents] = useState([])

  useEffect(() => {
    (async () => {
      for (const item of array) {
        setComponents([...conponents, <FunctionalComponent prop={(await promiseFunction(item)).prop}/>])
      }
    })()
  }

  return (
   <View>
     {components}
   </View> 
  )
}
about 4 years ago · Juan Pablo Isaza Denunciar

0

You have to separate the async function from rendering. And you have to do the array.map properly. The list of FunctionalComponent props must be a state.

const [propsArray, setPropsArray] = useState([])

useEffect(() => {    // or any other function, that will feed data
    array.map(item => {
         promiseFunction(item).then(res => {
                setPropsArray(p => [...p, res])
         }
    }, 
[])

return (<View>
 {propsArray.map(c => (<FunctionalComponent prop={c.prop} />) }
</View>)
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda