es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo renderizar imágenes dinámicas dentro de objetos de datos anidados.

12 Jun, 2023 Programación

Puedo usar console.log() para ver los datos que quiero después de mapear a través de los datos de mi consulta GraphQL. Sin embargo, las funciones anidadas .map no están mostrando mi JSX. ¿Es posible mostrar JSX en funciones anidadas de .map?

const NikonGallery = ({ data }) => {
return (
<Layout>
{data.allFiles.nodes.map((item) => {
        Object.entries(item).map(([key, value]) => {
          value.map((image) => {
            console.log("Individual image", image) // Logs show the data I want
            return ( 
              <>
                <GatsbyImage
                  image={image.gatsbyImageData}
                  alt={image.description}
                />
              </>
            )
          })
        })
      })}
 </Layout>
 )
}

<p>export default NikonGallery

La información de GraphQL/Contentful es una matriz anidada de objetos. Tengo problemas para mostrar el JSX cuando llamo a los objetos anidados a través de .map.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible renderizar JSX en funciones .map anidadas. Sin embargo, parece que el problema radica en la estructura de su código. En su ejemplo, la segunda función .map que está utilizando no está devolviendo nada a la función .map externa.

    Esto es lo que puede hacer para solucionar este problema:

    const NikonGallery = ({ data }) => {
  return (
    <layout>
      {data.allFiles.nodes.map((item) => {
        return Object.entries(item).map(([key, value]) => {
          return value.map((image) => {
            console.log("Individual image", image); // Los registros muestran los datos que deseo
            return (
              <react.fragment key="{image.id}">
                <gatsbyimage image="{image.gatsbyImageData}" alt="{image.description}"></gatsbyimage>
              </react.fragment>
            );
          });
        });
      })}
    </layout>
  );
};

export default NikonGallery;

    En el código actualizado, ambas funciones .map ahora están devolviendo sus elementos mapeados. Además, se ha agregado una propiedad key al React.Fragment para ayudar a React a optimizar el proceso de renderizado.

    Con estos cambios, debería poder renderizar JSX desde las funciones .map anidadas.

Comments are closed.