C'est peut-être une question très novatrice pour ici, mais je passe beaucoup de temps à voir une bonne approche pour le faire et je n'ai pas trouvé de réponse pratique. J'essaye de faire un simple appel à une API de repos et je veux passer une valeur avec la demande GET ajoutée à la chaîne. comme url / foo où foo est le paramètre. J'ai une variable de requête que je veux ajouter à la fin de la chaîne d'url pour la demande d'obtention. Merci d'avance.
class About extends React.Component {
constructor(props) {
super(props);
this.state = {
products: [],
filteredItems: [],
user: {},
query: '' <-- query variable to be appended to the end of the get request
};
}
componentDidMount() {
fetch(`'myurl/${this.state.query}'`) <-- i want to append the variable at the end of the string ??
.then(res => res.json())
.then((result) => {
console.log(result);
this.setState({
products: result,
filteredItems: result
});
}
)
}
queryChange = (evt) => {
this.setState({query: evt.target.value}) <-- update the variable state from an event
}
3 Réponses :
Supprimez les citations supplémentaires ( ') dans 'myurl/${this.state.query}'
let query = {id:1};
let url = 'https:example.com//xyz.com/search?' + query;
fetch(url)
Ok quand j'essaye url + requête attachée à la fin de la chaîne, j'obtiens SyntaxError: JSON.parse: caractère inattendu à la ligne 1 colonne 1 des données JSON j'ai essayé de récupérer les données codées en dur et je n'obtiens pas l'erreur d'analyse json .. aussi en supprimant les virgules de l'url, l'erreur est la même, c'est autre chose
Bienvenue dans Stack Overflow! Bien que cet extrait de code puisse résoudre le problème, il n'explique pas pourquoi ni comment il répond à la question. Veuillez inclure une explication pour votre code , car cela contribue vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondez à la question aux lecteurs à l'avenir, et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
Merci pour l'aide mon problème est ailleurs mais la réponse d'Avinash Mahlawat et de ehutchllew fonctionne parfaitement pour la question posée.
C'est mon plaisir et j'espère que vous ferez de même pour moi.
Vous pouvez passer param sans utiliser `` ou $ also, In componentDidMount ()
componentDidMount() {
let query = this.state.query;
fetch('myurl/'+query)
.then(res => res.json())
.then((result) => {
console.log(result);
this.setState({
products: result,
filteredItems: result
});
}
)
}
D'accord, j'ai également trouvé ce à quoi je m'attendais lorsque je publie le formulaire componentDidMount () {} avec la bonne URL + requête ajoutée, mais ce n'est pas le cas. Cela a fonctionné pour moi de récupérer les données dans un événement onClick de bouton. En d'autres termes, je déplace la logique de componentDidMount () dans une fonction onClick et cela fonctionne bien.
Oui, désolé, j'ai oublié de voter. Terminé. Merci encore
Ce que vous utilisez là-bas ne fonctionne pas? Les chaînes de modèle semblent être un bon moyen de procéder.
En fait, lorsque je soumets le formulaire, je ne sais pas comment invoquer componentDidMount () c'est mon problème jusqu'à présent.