Je reçois des images infinies de back-end (Django Rest) via le flux en direct, chaque flux en direct donne une image unique distincte et je veux montrer en réaction dans une div d'un composant, chaque fois qu'une image est venue en réponse et je veux la montrer dans un div d'un composant, j'ai d'abord essayé une fonction infinie qui envoie des requêtes à l'infini à l'api et obtient une seule image à chaque fois en réponse mais de cette façon la page entière se recharge je veux seulement que div se recharge dans laquelle les images proviennent du backend et changent sans rechargement page entière, quelle peut être la meilleure approche pour cela?

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>
)
}

Comment puis-je obtenir l'image de la demande sans recharger le composant entier et peut-il y avoir une meilleure approche pour y parvenir?

0
Nabeel Ayub 6 nov. 2019 à 16:28

2 réponses

Au lieu de demandes infinies, une meilleure approche serait d'utiliser des sockets.

Un tutoriel suggéré: https://medium.com/dailyjs/combining-react-with-socket-io-for-real-time-goodness-d26168429a34

Dans votre cas, car il est spécifique à Django. Découvrez également les chaînes Django.

1
Y M 6 nov. 2019 à 13:35

Une meilleure approche est d'utiliser des sockets. Mais si cela n'est pas requis pour vous, vous pouvez appeler la méthode runInfinite () en utilisant un intervalle spécifique:

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

Précisez l'heure qui vous convient.

1
Swapnil N 6 nov. 2019 à 13:50