Bonjour les amis,

Alors voici mon problème:

J'ai installer django rest framework et j'ai suivi un tuto, donc j'arrive a générer un json a partir d'un url sur l'adresse  : 127.0.0.1:4000

J'arrive donc a afficher le contenu du json avec un fetch en react :

Cependant j'ai souhaiter que se soit asynchrone donc lorsque je modifie le json a partir de django rest framework, et la sa ne fonctionne pas je suis obligé d'actualiser ma page avec react pour que la liste se mette a jour !

voici mon code sur react :

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  state = {
    data: []
  }

  async componentDidMount() {
    const response = await fetch("http://127.0.0.1:4000/languages/");
    const json = await response.json();
    this.setState({ data: json });
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.data.map(el => (
            <li>
              {el.nom}: {el.message}
            </li>
          ))}
        </ul>
      </div>
    );
  }

}

export default App;

quelqu'un peut m'expliquer svp ?

Merci a vous

componentDidMount s'exécute lorsque le composant est monté. React se met à jour automatiquement en fonction de ton state. Ton state ne se met donc pas à jour en fonction du retour de fetch car fetch n'est appelé qu'une seule fois.

que me conseillerais tu de faire stp, peut-tu m'indiquer un tuto ou une docs stp ?

voici une solution que j'ai fait mais elle ne me plait pas

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  state = {
    data: []
  }

  componentDidMount() {

    fetch('http://127.0.0.1:4000/languages/')
                    .then(response => response.json())
                    .then(data => this.setState({ data: data }));

    this.timer = setInterval(
            () => fetch('http://127.0.0.1:4000/languages/')
                    .then(response => response.json())
                    .then(data => this.setState({ data: data })),
            100,
            );

  }

  componentWillUnmount() {
        clearInterval(this.timer);
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.data.map(el => (
            <li>
              {el.nom}: {el.message}
            </li>
          ))}
        </ul>
      </div>
    );
  }

}

export default App;

-
Edité par AbdelMessaoudi3 13 décembre 2018 à 12:27:33

Voici une autre solution

import React, { Component } from 'react';
import MessageList from './MessageList';

class App extends Component {
 
  state = {
    data: []
  }
 
  componentDidMount() {

  	let fetchData = () => {
        fetch('http://127.0.0.1:4000/languages/')
                    .then(response => response.json())
                    .then(data => this.setState({ data: data }))
    }
    
    fetchData()
    this.update = setInterval(fetchData, 1000)
 
  }
 
  componentWillUnmount() {
        clearInterval(this.update);
  }
 
  render() {
    return (
      <div>
        <MessageList data={this.state.data} />
     </div>
    );
  }
 
}
 
export default App;

import React, { Component } from 'react';

class MessageList extends Component {
  render() {
    return (
      <ul>                 
        {this.props.data.map(data => {
          return (
           <li key={data.id}>
             <div>
               {data.nom}
             </div>
             <div>
               {data.message}
             </div>
           </li>
         )
       })}
     </ul>
    )
  }
}
export default MessageList

Ce qui me dérange donc c'est le set interval, je souhaiterais que se soit asynchrone automatiquement ! quelqu'un aurait une solution ?

Qu'il soit caché ou visible, le rafraîchissement "automatique" se fait de façon régulière comme le permet setInterval. React aussi appelle la fonction render plusieurs fois (à chaque modification du state) si la fonction n'est pas appelée toutes les secondes mais à chaque modification du state c'est parce qu'en interne c'est une autre fonction qui est appelée (dont j'ai oublié le nom) qui teste si la state a changé ou non. Si je simplifie ça donne ça : 

class Component {

  constructor() {
    this.state = {};
    this.old_state = {};
  }

  componentDidMount() {
    let c = this;
    this.update = setInterval(() => { 
      if (c.test_update_state()) {
        render();
        this.old_state = this.state;
      } 
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.update);
  }

  test_update_state() {
    return this.state != this.old_state
  }

  render() {
    return <template></template>;
  }

}

J'imagine que React utilise setInterval mais peut être que c'est autre chose. Tu peux consulter le code de react sur git pour vérifier. Je comprends que ta solution parait crade mais je penses que c'est simplement parce que tu as l'habitude d'utiliser des mécanismes "cachés". Si tu fouille un peu, je suis certain que la solution qu'utilise React est similaire et par conséquent utiliser setInterval dans ce cas précis n'est pas si horrible.