10 replies

Ok so more stupid problems from me 😅

Ok so more stupid problems from me

I want to have two for-loops in a sense: one loops over the entity I call "generation" and the second one loops over "images" inside the "generation".

I'm trying to do both things with

useQuery

useQuery

, in the second case I'm using results of the first one.... and react doesn't like that!

I'm getting

Rendered more hooks than during the previous render

Rendered more hooks than during the previous render

Rendered more hooks than during the previous render

Rendered more hooks than during the previous render

The code is roughly speaking

const generations = useQuery("listGenerations", "foo") || [];
...

{generations.map(generation => {
          const imageUrls = useQuery("getImagesForGeneration", generation) || [];

          const imageDom = imageUrls.map(imageUrl => {
            return (<li key={generation._id.toString()}>
              <span>
                <img
                  src={`/api/get-image/${imageUrl}`}
                  height="300px"
                  width="auto"
                />
              </span>
            </li>)
          })

          return (
            <li key={generation._id.toString()}>
              <span>{g}</span>
              {imageDom}
            </li>
          )
        })}

const generations = useQuery("listGenerations", "foo") || [];
...

{generations.map(generation => {
          const imageUrls = useQuery("getImagesForGeneration", generation) || [];

          const imageDom = imageUrls.map(imageUrl => {
            return (<li key={generation._id.toString()}>
              <span>
                <img
                  src={`/api/get-image/${imageUrl}`}
                  height="300px"
                  width="auto"
                />
              </span>
            </li>)
          })

          return (
            <li key={generation._id.toString()}>
              <span>{g}</span>
              {imageDom}
            </li>
          )
        })}

const generations = useQuery("listGenerations", "foo") || [];
...

{generations.map(generation => {
          const imageUrls = useQuery("getImagesForGeneration", generation) || [];

          const imageDom = imageUrls.map(imageUrl => {
            return (<li key={generation._id.toString()}>
              <span>
                <img
                  src={`/api/get-image/${imageUrl}`}
                  height="300px"
                  width="auto"
                />
              </span>
            </li>)
          })

          return (
            <li key={generation._id.toString()}>
              <span>{g}</span>
              {imageDom}
            </li>
          )
        })}

const generations = useQuery("listGenerations", "foo") || [];
...

{generations.map(generation => {
          const imageUrls = useQuery("getImagesForGeneration", generation) || [];

          const imageDom = imageUrls.map(imageUrl => {
            return (<li key={generation._id.toString()}>
              <span>
                <img
                  src={`/api/get-image/${imageUrl}`}
                  height="300px"
                  width="auto"
                />
              </span>
            </li>)
          })

          return (
            <li key={generation._id.toString()}>
              <span>{g}</span>
              {imageDom}
            </li>
          )
        })}

Ok so more stupid problems from me 😅

Similar Threads

Similar Threads

Similar Threads