Je reçois les données du serveur mais je ne parviens pas à les afficher sur le navigateur. Je reçois une erreur en tant que:

intercepté (dans la promesse) TypeError: impossible de lire la propriété 'setState' de undefined

import React from 'react';

import axios from 'axios';
class App extends React.Component {
constructor(props){
    super(props);
    this.state={
    posts:'hello',
    dos:[]
    }

};


    componentDidMount() {
    axios.get(`http://192.168.1.9:8082`)
      .then(function(data) {
      console.log(data);
      this.setState({dos:data});
      });
  }

   render() {
      return (
         <div>
            Hello World!!!
            <h1>{this.state.posts}</h1>
            <h2>{this.state.dos}</h2>
         </div>
      );
   }
}

export default App;
2
Abhilash Muttalli 16 janv. 2017 à 07:52

2 réponses

Meilleure réponse

C'est un problème de contexte, votre erreur est que vous ne vous êtes pas lié jusqu'à la fonction anonyme. Ce que vous voulez probablement faire est d'utiliser les fonctions fléchées, essayez ceci:

componentDidMount() {
   axios.get(`http://192.168.1.9:8082`)
    .then(data => this.setState({dos:data}););
}

Les fonctions fléchées gardent toujours le contexte de cela.

Solution alternative:

componentDidMount() {
    axios.get(`http://192.168.1.9:8082`)
      .then(function(data) {
         console.log(data);
         this.setState({dos:data});
      }).bind(this);
}
0
Mayank Shukla 27 mars 2018 à 19:32

Essaye celui-là:

componentDidMount() {
    let self = this;
    axios.get(`http://192.168.1.9:8082`)
      .then(function(data) {
      console.log(data);
      self.setState({dos:data});
      });
  }
0
RizkiDPrast 16 janv. 2017 à 05:20