Загрузка изображений JSX по мере их создания

Question

Я работаю над проектом, который генерирует изображения. Я использую JSX для приложения React. Мне нужно загружать изображения динамически по мере их создания (Загрузка один за другим на странице изображений). В настоящее время у меня есть функция getImages. Он ожидает ответа от моего Flask приложения, которое при возврате означает, что логотипы сгенерированы и находятся в нужном месте (я думаю, что произойдет, когда я запустите это, что он будет ждать загрузки обоих изображений, но Я не смог ничего показать, даже с обоими изображениями в нужной папке). Как только я получаю этот ответ, функции внутри getImages возвращают объекты Card (которые являются просто простыми обертками для. Я попробовал useEffect и слушатель нажатия кнопки, но они, кажется, не работают. Вот мой код для Функция getImages.

    async function getImage1(){
        const response= await fetch("http://127.0.0.1:5000/img1")
        const data = await response.json();
        return (
        <Card image="my_path/output/img1.jpg"/>
        )
    }

    async function getImage2(){
      const response= await fetch("http://127.0.0.1:5000/img1")
      const data = await response.json();
      return (
      <Card image="my_path/output/img2.jpg"/>
      )
      }
    getImage1();
    getImage2()
  }

Вот мой код для ват, который возвращает моя страница:

useEffect(getImages)

    return (
      <div className="App">
        <button onClick={e => getImages}>GetImages</button>
        {getImages()}
      </div>
    );
  }

  export default Images;

Я действительно ценю помощь, которую вы все оказываете, поэтому спасибо заранее.

Answer 1

Вот интересный генератор изображений

const App = () => {
  const [hash,setHash] = useState(0)
  return (
    <div>
        <Component hash={hash}/>
        <button onClick={()=>setHash(Math.random() * 100) + 1}>Generate Image</button>
        </div>
  )
}

const Component = ({hash}) => {  
const [isLoading,setIsLoading] = useState(true)
const [image,setImage] = useState('')
console.log(hash)
useEffect(()=>{
  fetch(`https://robohash.org/${hash}`)
    .then(response=>response.blob())
    .then(image => {      
      let url = URL.createObjectURL(image)
      setImage(url)
      setIsLoading(false)
  })
},[hash])


return(
  isLoading ? 'Loading...' :
    <div>
      <img src={image}/>
    </div>
  )
}

Answer 2

Почему вы загружаете изображение и ничего не делаете с данными? Я думаю, что вы должны сохранить выборки изображений в состоянии компонентов. Или просто URL-адрес изображений, а затем в ответ сделайте:

   return(
      <>
          {images.map(imageUrl => <Card img={imageUrl}/>)}
      </>
   )

Также прочитайте документы функции useEffect, в частности, второй параметр argunemnt https://reactjs.org/docs/hooks-effect.html