как отправить запрос бесконечно в ответ без рендеринга всего компонента в прямом эфире

Question

Я получаю бесконечные изображения из серверной части (Django Rest) через прямую трансляцию, каждый раз, когда прямая трансляция дает отдельное уникальное изображение, и я хочу показать в реакции в div компонента, Каждый раз, когда одно изображение приходит в ответ, и я хочупокажите это в div компонента, сначала я попробовал бесконечную функцию, которая бесконечно отправляет запросы в api и получает одно изображение каждый раз в ответ, но таким образом вся страница перезагружается. Я хочу, чтобы только div перезагружал, какие изображения пришли из бэкэнда иизменения без перезагрузки всей страницы, что может быть лучшим подходом для этого?

runInfinite=()=>{

        axios.post('http://127.0.0.1:8000/faceapp/process_image/')
            .then(res => {
                this.setState({baseimage: res.data})
            });
    };

render(){
          if (this.state.flag){           // flag will always be true for infinite run
            this.runInfinite()
        }
return(   
         <div>
           {this.state.baseimage?<img  src={"data:image/png;base64," +  this.state.baseimage}/>:<h1>Hello</h1>}  // get image(single) from request's response
         </div>
)
}

Как я могу получить изображение из запроса без перезагрузки всего компонента, и может ли быть другой лучший подход для достижения этой цели?

Answer 1

Лучше всего использовать сокеты. Но если он вам не нужен, вы можете вызвать метод runInfinite () с определенным интервалом:

render(){
   if (this.state.flag){
        setInterval(()=> { this.runInfinite(); }, 1000);
   }
}

Укажите подходящее время.

Answer 2

Вместо бесконечных запросов лучшим подходом будет использование сокетов.

Предлагаемый учебник: https://medium.com/dailyjs/combining-react-with-socket-io-for-real-time-goodness-d26168429a34

В вашем случае, так как он специфичен для Django. Оформить заказ Django Channels тоже.