web-dev-qa-db-fra.com

Axios ReactJS - Impossible de lire la propriété 'setState' d'undefined

J'obtiens une erreur "TypeError: Impossible de lire la propriété 'setState' de undefined" lors d'une opération simple dans ReactJS. J'essaie d'utiliser axios pour remplir l'entrée avec des données de réponse. Jusqu'ici sans succès. Je suis très nouveau à la fois chez axios et ReactJs donc ça pourrait être quelque chose de très simple que j'ai négligé?

Je m'attendrais à ce que "TEXTE DE RÉPONSE" apparaisse dans le champ de saisie du formulaire après la correction de TypeError.

Voici ma composante:

class BasicInfoBlock extends React.Component {
    constructor(props) {
        super(props);

        this.state = { name : "EventTestName" };
    }

    componentDidMount() {
        axios
        .get(getBaseUrl()+`get`)
        .then(function (response) {
            this.setState({name: "RESPONSE TEXT"});
            //this.setState({name: response.data.name});
        })
        .catch((e) => 
        {
            console.error(e);
        });
        //this.setState({});
    }


    render(){
        return(
                <form className="form-horizontal">
                    <div className="form-group">
                        <label htmlFor="eventName" className="col-sm-2 control-label">Name</label>
                        <div className="col-sm-10">
                        <input type="text" id="eventName" className="form-control" placeholder="Event name" defaultValue={this.state.name}/>
                        </div>
                    </div>
                </form>
            );
    }
}

Merci de votre aide

modifier: il ne s'agit pas d'une question en double, cette question concerne le fait que "ceci" n'est pas disponible en rappel. La question sélectionnée comme doublon est liée à la liaison.

javascriptreactjsaxios
17
rluks

Dans la méthode then de votre promesse, this ne fera plus référence au composant. Vous pouvez résoudre ce problème en utilisant une fonction de flèche comme celle-ci:

componentDidMount() {
  axios
  .get(getBaseUrl()+`get`)
  .then((response) => {
    this.setState({name: "RESPONSE TEXT"});
    //this.setState({name: response.data.name});
  })
  .catch((e) => 
  {
    console.error(e);
  });
  //this.setState({});
}
38
Ben Nyberg