Il semble que cet ensemble de codes ne met pas à jour mon état, et je ne sais pas pourquoi! L'API renvoie 100% VRAI (comme vu depuis axios console.log). Merci d'avance pour l'aide!

import React, { Component } from 'react';

import axios from 'axios';

export class Test extends Component {
state = {
    reponse: false
}

componentDidMount () {
    axios.get(`/api`)
        .then(res => {
            console.log(res.data.success);
            this.setState({ response: res.data.success });
        });
  }

render() {
    if (this.state.reponse) {
        return (
            <div>
                <h1>Response Gathered!</h1>
            </div>
        )
    } else {
        return (
            <div>
                <button onClick={() => console.log(this.state.reponse)}>Check State</button>
            </div>
        )
    }
}
}

export default Test;
0
Cody 18 avril 2020 à 05:09

3 réponses

Meilleure réponse

Changement,

state = {
    reponse: false
}

À,

  state = {
    response: false
 }

Il y a une faute de frappe dans la déclaration d'état (réponse aux re s ponse) ..

Et le code modifié ressemblerait,

class Test extends React.Component {
  state = {
    response: false
  };

  componentDidMount() {
    axios.get(`/api`)
    .then(res => {
        console.log(res.data.success);
        this.setState({ response: res.data.success });
    });
  }

  render() {
    if (this.state.response) {
      return (
        <div>
          <h1>Response Gathered!</h1>
        </div>
      );
    } else {
      return (
        <div>
          <button onClick={() => console.log(this.state.response)}>
            Check State
          </button>
        </div>
      );
    }
  }
}

export default Test;

Codes de travail et exemple de boîte

2
Maniraj Murugan 18 avril 2020 à 02:34

Définir state dans la fonction constructeur.

 constructor(props) {
    super(props);
    this.state = {response: false};
  }

Btw, il y avait une erreur d'orthographe.

0
Raza 18 avril 2020 à 02:12
render() {
    return (
        {this.state.response ? 
          <h1>Some text</h1> : 
          (<div>
              <button onClick={() => console.log(this.state.response)}>
                 Check State
               </button>
           </div>)
        }
    );
  }
0
O.o 18 avril 2020 à 02:28