Ne pouvez pas définir l'état dans componentWillMount

Je suis entrain de créer une simple application de chat où je fais un appel api pour ma base de données via axios qui retourne un tableau d'objets de message. Je suis en mesure d'obtenir les données lorsque je fais un axios appel dans componentWillMount. Alors je suis en train de setState pour afficher la conversation. Voici le code:

export default class Chat extends Component {
  constructor(props){
    super(props);

    this.state = {
      messages : [],
      message : '',
    };
    this.socket = io('/api/');
    this.onSubmitMessage = this.onSubmitMessage.bind(this);
    this.onInputChange = this.onInputChange.bind(this);
  }

  componentWillMount() {
    axios.get(`api/messages`)
      .then((result) => {
        const messages = result.data
        console.log("COMPONENT WILL Mount messages : ", messages);
        this.setState({ 
          messages: [ ...messages.content ] 
        })
  })
};

J'ai vu quelques posts concernant le cycle de vie des fonctions et de l'état, et il me semble que je suis en train de faire la bonne chose.

Nouveau de souligner, axios de travail pour l'appel de l'amende, le réglage de l'etat n'est pas de travail. Je suis toujours de voir un tableau vide. Merci à l'avance!

EDIT: Voici la solution à mon problème en particulier. Il a été enterré dans un commentaire, donc, j'ai pensé le laisser ici..

"J'ai découvert le problème. Il était en fait dans la façon dont j'ai été l'analyse de mes données. La propagation de l'opérateur sur ...les messages.le contenu n'a pas fonctionné parce que les messages.le contenu n'existe pas. messages[i].il y a du contenu. Donc, ma solution était de se répandre ...des messages, Puis dans un composant enfant je carte sur les objets et les analyser à l' .le contenu de la propriété. Merci pour l'aide les gars!"

OriginalL'auteur Phil | 2016-10-23

11

Dans votre cas, votre setState() ne fonctionnera pas parce que vous êtes à l'aide de setState() à l'intérieur d'un async rappel

De Travail Violon: https://jsfiddle.net/xytma20g/3/

Vous effectuez un appel d'API qui est asynchrone. Ainsi, la setState sera appeler uniquement après réception des données. Ce n'est pas faire n'importe quoi avec componentWillMount ou componentDidMount. Vous devez gérer le vide message dans votre rendu. Lorsque vous recevez vos données à partir de l'API, de l'ensemble des données de l'état et de la composante sera de nouveau rendu avec le nouvel état qui sera reflété dans votre rendu.

Pseudo-code:
```
export default class Chat extends Component {
  constructor(props){
    super(props);

    this.state = {
      messages : [],
      message : '',
    };
    this.socket = io('/api/');
    this.onSubmitMessage = this.onSubmitMessage.bind(this);
    this.onInputChange = this.onInputChange.bind(this);
  }

  componentWillMount() {
    axios.get(`api/messages`)
      .then((result) => {
        const messages = result.data
        console.log("COMPONENT WILL Mount messages : ", messages);
        this.setState({ 
          messages: [ ...messages.content ] 
        })
  })

  render(){
    if(this.state.messages.length === 0){
     return false //return false or a <Loader/> when you don't have anything in your message[]
    }

   //rest of your render.
  }
}; 
```
Je suis en train de tirer vers le haut la conversation quand je fais la requête get de sorte que la conversation va persister sur reload. Il semble que le chargeur va me donner un "pas de nouveaux messages" invite de commande et que rendre les nouveaux messages que j'ai saisie. Je pensais aussi de faire la demande à un niveau plus élevé de composants afin que les messages sont rendus dans l'état. Voici ce que ma méthode render ressemble maintenant
jsfiddle.net/zqduqfw7 voici le rendu du code @Pranesh Ravi
J'ai découvert le problème. Il était en fait dans la façon dont j'ai été l'analyse de mes données. La propagation de l'opérateur sur ...les messages.le contenu n'a pas fonctionné parce que les messages.le contenu n'existe pas. messages[i].il y a du contenu. Donc, ma solution était de se répandre ...des messages, Puis dans un composant enfant je carte sur les objets et les analyser à l' .le contenu de la propriété. Merci pour l'aide les gars!
Vous êtes un rockstart. Keep it up.

OriginalL'auteur Pranesh Ravi
0

componentWillMount() est appelée juste avant le montage se produit. Il
est appelé avant que le render(), par conséquent, la création de l'état dans cette méthode
ne pas déclencher un nouveau rendu. Éviter d'introduire des effets secondaires ou des
les abonnements dans cette méthode. docs

Donc, Vous devez appeler componentDidMount comme-
```
componentDidMount() {
    axios.get(`api/messages`)
      .then((result) => {
        const messages = result.data
        console.log("COMPONENT WILL Mount messages : ", messages);
        this.setState({ 
          messages: [ ...messages.content ] 
        })
  })
```
Vous pointez est valide. Mais, de Réagir utilisera la nouvelle valeur de l'état pour la première rendre au lieu de re-rendre. C'est le sens de la déclaration de la méthode ne va pas déclencher un nouveau rendu. Pour vos éclaircissements, je vais ajouter un exemple de travail. jsfiddle.net/q25sfL0z
que faire si votre appel d'API a pris trop de temps pour revenir réponse?
Dans ce cas, vous devez utiliser un chargeur pour indiquer à l'utilisateur.
J'attrape ici initiale de rendu et de re-rend sont différents. Sinon, votre point est valide!
Merci pour vos éclaircissements. Je viens d'apprendre une nouvelle approche..

OriginalL'auteur Fazal Rasel

Vous devez vous connecter pour publier un commentaire.