avoir du mal à passer des modifications à persister avec la fonction ASYNC lorsqu'elle est appelée à partir d'un gestionnaire d'événements OnClick. J'ai les fonctions que j'appelle:
render() {
return(
<div>
<div>
<form>
<label>
ID:
<input type="text" onChange={e => this.setState({ID: e.target.value})}/>
</label>
<input type="submit" onClick={async () =>{await this.retrieveData();}}/>
</form>
</div>
<div>
{this.state.ID}
{this.state.testVal}
</div>
</div>
);
}
3 Réponses :
Le problème est que le formulaire Soumettre le gestionnaire est en cours d'exécution et qui est rafraîchissant la page car il n'y a pas empêcher la valeur par défaut d'attraper cet événement de soumission. Pour résoudre ce problème, je recommanderais de déplacer le gestionnaire du bouton d'entrée vers le gestionnaire de formulaire. Vous auriez également besoin d'empêcher le formulaire de soumettre de la circulation que vous pouvez réaliser via l'événement de gestion de formulaire et AVIS I J'ai supprimé le gestionnaire de clic à partir du contrôle de soumission de saisie, car j'imagine que deux événements se produisaient un clic sur le bouton puis Aussi une soumission sur le formulaire. Bien que l'entrée Soumettre le contrôle, cliquez sur la survenue, la soumission sur le formulaire lui-même n'évoyait pas et que la page a rafraîchir et empêcher la demande HTTP de terminer. Espérons que cela aide! PavigNDefault () . Sinon, la page se rafraîchrait lorsque vous soumettez le formulaire.
Vérifiez cet exemple sur lequel vous appelez API à l'aide de la récupération après avoir cliqué sur un bouton.
import React, {Component} from "react";
class FetchExample extends React.Component {
state = {
isLoading: false,
questions: [],
error: null
};
fetchQuestions = () => {
fetch(`https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean`,)
.then(response => {
if (response.status !== 200) {
console.log('There was a problem. Status Code: ' + response.status);
return;
}
response.json().then(data => {
console.log(data);
this.setState({
questions: data,
isLoading: false
})
});
}
)
.catch(function (error) {
console.log('Error: ', error);
this.setState({error, isLoading: false})
});
};
render() {
const {isLoading, questions, error} = this.state;
return (
<React.Fragment>
<h1>Random Question</h1>
<button onClick={this.fetchQuestions}>Click for calling API using fetch</button>
{error ? <p>{error.message}</p> : null}
{!isLoading && questions.results ? (
questions.results.map((questions, index) => { //something right here
//is erroring
const {question, category, type, difficulty} = questions;
return (
<div key={index}>
<p>Question: {question}</p>
<p>Question Type: {type}</p>
<p>Difficulty: {difficulty}</p>
<hr/>
</div>
);
})
) : isLoading ? (
<h3>Loading...</h3>
) : null}
</React.Fragment>
);
}
}
export default FetchExample;
Merci à tous pour votre aide, c'est le changement suivant que j'ai fait.
j'ai changé à ceci Et maintenant, cela fonctionne parfaitement, donc pas de problèmes avec cela. Merci encore.
Je recommanderais d'ajouter un try-catch à chaque opération ASYNC et de vérifier si des erreurs sont survenues. Ajouter
{mode: "Cors"} ne résoudra pas la différence d'erreur CORS du serveur que vous effectuez des demandes. En outre, cela pourrait échouer au niveau de la demande, au.text () si ce n'est pas un texte, mais l'application / JSON@ALEXANDERSTAROSELSKY Je suis allé de l'avant et j'ai ajouté l'essai Catch, je ne reçois aucune erreur, de mon point de vue, il semble que la récupération ne tente même jamais.
Vous ne voyez aucune demande dans l'onglet Réseau de vos outils de développeur?
@ALEXANDERSTAROSELSKY i Recherche, je devais essayer de prendre une photo parce que cela se produit si vite. Cela fait la demande, mais seulement pour une fraction de seconde, il apparaît sur mon onglet Réseau, puis disparaît immédiatement.
Je vais soumettre une réponse dans quelques-uns je sais ce que le problème est.