J'ai d'abord déclaré un tableau empy à l'intérieur des états:
Mais les données ne sont pas affichées, elles montrent une erreur:
également une erreur lors de la définition de l'état comme
Unhandled Rejection (TypeError): undefined is not an object (evaluating 'this.setState')
et il pointe vers la ligne setState quelqu'un peut-il résoudre ce problème
4 Réponses :
Je ne comprends pas pourquoi vous utilisez JSON.stringify ici
componentDidMount() {
fetch('http://localhost:3000/"my end point in api"')
.then(function(response) {
return response.json();
})
.then(function(jsonStr) {
this.setState({ CourseTitle: jsonStr.course_title });
});
}
Parce que vous convertissez déjà vos données en json ici
return response.json();
Appel également L'API pour obtenir des données utilise le hook de cycle de vie componentDidMount . Essayez de changer votre code comme ceci
return JSON.stringify(jsonData);
hey tony je ne peux pas vérifier que votre réponse fonctionne ou non j'ai essayé de mettre console.log mais rien n'a été affiché. probablement, je pense que je ne pourrais pas utiliser console.log au bon endroit.Pouvez-vous modifier votre code en mettant console.log ou toute autre méthode permettant de vérifier la réponse
Selon la documentation officielle, componentWillMount est déprécié, essayez de l'appeler dans componentDidMount.
componentDidMount(){
fetch('http://localhost:3000/"my end point in api"')
.then(function(response) {
return response.json();
}).then(function(jsonData) {
return JSON.stringify(jsonData);
})
.then(function(jsonStr) {
this.setState({ CourseTitle: jsonStr.course_title });
alert(jsonStr.course_title);
});
}
Et lors de l'impression, mettez une condition comme console.log ("impression", this.state.courseTitle? this.state.courseTitle: "pas encore récupéré")
Vous ne comprenez pas pourquoi vous récupérez comme mentionné dans l'article au lieu de comme ceci ...
componentDidMount() {
fetch('http://localhost:3000/"my end point in api"')
.then(function(response) {
return response.json();
})
.then(function(jsonStr) {
this.setState({ CourseTitle: jsonStr.course_title });
alert(jsonStr.course_title);
});
}
et conservez également vos données avant de les rendre
Et il est recommandé d'appeler api dans la méthode du cycle de vie componentDidMount selon la documentation officielle de Reactjs
Trois choses:
Essayez de suivre les recommandations des autres, changez componentWillMount par componentDidMount.
Suivez également la recommandation de suppression le JSON.stringify (jsonData) parce que vous convertissez l'objet dans une chaîne et après cela, vous essayez d'accéder aux propriétés de l'objet (et elles n'existent pas).
Enfin, c'est une erreur courante dans JavaScript de mal comprendre ce que signifie this dans différents contextes. Par exemple, jetez un œil à l'extrait suivant:
componentDidMount() {
const cls = this;
fetch('http://localhost:3000/"my end point in api"')
.then(function(response) {
return response.json();
})
.then(function(jsonStr) {
cls.setState({ CourseTitle: jsonStr.course_title });
});
}
Comme vous pouvez le constater, ce à l'intérieur du setTimeout ne fait plus référence à l'objet et c'est parce que setTimeout fait référence à un autre objet (très probablement window en non -strict mode).
Dans votre cas, ce à l'intérieur de fetch ne fait plus référence à la classe . Essayez de stocker la portée de la classe dans une variable avant d'exécuter fetch et utilisez cette variable au lieu de this pour appeler setState . Vérifiez l'extrait suivant:
const obj = {
fetch() {
const myObject = this;
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(function(response) {
return response.json();
})
.then(function(jsonStr) {
console.log('wrong this', this.toString());
console.log('right this', myObject.toString());
});
}
};
obj.fetch();
Vous devez refactoriser votre code en quelque chose comme ceci:
const obj = {
say() {
console.log(this.toString());
},
sayDelayed() {
setTimeout(function() {
console.log(this.toString());
}, 500);
}
};
obj.say();
obj.sayDelayed();
vous n'avez pas besoin de JSON.stringify (jsonData) car il convertit un objet ou une valeur JavaScript en chaîne JSON. Si vous console.log (jsonStr) vous saurez ce que je veux dire, alors vous essayez d'accéder au .course_title d'une chaîne.
Une mise à jour sur cette question? Ma réponse a-t-elle résolu votre problème? Si tel est le cas, veuillez marquer ma réponse comme acceptée.