J'utilise un rappel de axios.get pour définir l'état d'un composant React. La propriété data de la réponse contient un tableau d'objets que j'utilise pour définir l'état.

Lorsque je connecte la propriété state à la console, il n'y a aucun problème et je peux voir le tableau des objets. Cependant, si j'essaye d'enregistrer un de ces objets individuellement, j'obtiens l'erreur:

Impossible de lire la propriété '0' de null sur ResponsiveTable.render

Voici le code de mon composant:

class ResponsiveTable extends React.Component {

    constructor (props) {
        super(props)
        this.state = {
            returnedQuery: null
        };
    }

    componentDidMount() {
        axios.get('/api/latestLeads')
          .then((response) => {
              this.setState({
                  returnedQuery: response.data
              });
          })
          .catch(function (error) {
              console.log(error);
          });
    }

    render() {

        console.log(this.state.returnedQuery[0]);

        return (
            <div>
                <h1>test</h1>
            </div>
        );
    }
}
1
Niall Faucher 9 août 2017 à 19:24

2 réponses

J'ai trouvé la solution qui était assez similaire à celle d'Andrew ci-dessus, j'ai utilisé l'état interne du composant pour déterminer si la méthode axios.get était revenue. Ci-dessous le code de travail, je suis maintenant en mesure d'accéder aux éléments du tableau retourné et à leurs propriétés.

class ResponsiveTable extends React.Component {

    constructor (props) {
        super(props)
        this.state = {
            returnedQuery: null
        };
    }

    componentDidMount() {

        const self = this;

        // let returnedQuery;
        axios.get('/api/latestLeads')
          .then((response) => {
              self.setState({
                  returnedQuery: response.data
              });
              console.log(response.data);
          })
          .catch(function (error) {
              console.log(error);
          });
    }

    render() {
        return (
          <div>
              <h1>{'This will always render'}</h1>
              { this.state && this.state.returnedQuery &&
              <div>{this.state.returnedQuery[0].email}</div>
              }
          </div>
        )
    }
}
0
Niall Faucher 9 août 2017 à 18:20

Vous pouvez essayer ceci:

class ResponsiveTable extends React.Component {

    constructor (props) {
        super(props)
        this.state = {
            returnedQuery: null
        };
        this.getData();
    }

    getData = () => {
         axios.get('/api/latestLeads')
          .then((response) => {
              this.setState({
                  returnedQuery: response.data
              }, () => {console.log(this.state.returnedQuery);}); //What does this console.log() say?
          })
          .catch(function (error) {
              console.log(error);
          });
    }

    render() {

        console.log(this.state.returnedQuery[0]);

        return (
            <div>
                <h1>test</h1>
            </div>
        );
    }
}
0
Nocebo 9 août 2017 à 16:41