J'ai un composant qui tire dans plusieurs accessoires pour utiliser une URL une URL qui appelle à son tour une API pour les données JSON. Les accessoires sont collectés par une série de boîtes de sélection qui envoient les sélections sous forme d'accessoires et le composant installe ensuite ces accessoires dans un appel Axios.get comme: Voici mon problème. Si l'un des accessoires manquait, l'appel Axios API ne fonctionnerait pas. Par exemple, dans l'exemple ci-dessus si je n'ai pas de nextProps.Sélectionnée, l'API renverra une erreur. Donc, ma question est de savoir quelle est la syntaxe de l'appel ci-dessus pour dire "s'il y a une nextprops.Selectedseverity, ajoutez" & gravité = $ {nextprops.selectedseverity} "à l'URL, mais si vous ne l'ajoutez pas. Toute aide est appréciée. Toute aide est appréciée. Toute aide est appréciée. Toute aide est appréciée. Toute aide est appréciée. à l'avance.
3 Réponses :
Essayez ceci:
p>
// for demo purposes
let nextProps = {
startDate: '1janv2019',
endDate: '10janv2019'
}
let url = '/inventory_reporter_api/logs?'
+ [
{ key: 'severity', var: nextProps.selectedSeverity },
{ key: 'start', var: nextProps.startDate },
{ key: 'end', var: nextProps.endDate }
]
.map(o => o.var ? `${o.key}=${o.var}` : '')
.join('&')
console.log(url);
Merci Nino Je vais essayer ça!
Le problème est que c'est la saisie d'une "&" dans l'URL si la prochaineProps est vide et provoquant une erreur.
Ceci est assez simple si vous avez une liste des accessoires:
p>
const names = [
["severity", "selectedSeverity"],
["priority", "selectedPriority"],
["importance", "selectedImportance"],
["Urgency", "selectedUrgency"]
];
const nextProps = {
selectedSeverity: 7,
selectedImportance: "high"
};
// ...using it...
let url = names
.filter(([urlParam, propName]) => nextProps[propName] !== undefined)
.map(([urlParam, propName]) => urlParam.toLowerCase() + "=" + encodeURIComponent(nextProps[propName]))
.join("&");
console.log(url);Merci beaucoup, T.J.!
@ CHAYS412 - Pas de soucis! Si cette réponse ou l'un des autres a répondu Votre question, la manière dont la pile overflow fonctionne, vous «accepteriez» cette réponse en cliquant sur la coche à côté de celui-ci; détails ici . Mais seulement si votre question est vraiment répondue.
Je construirais un petit utilitaire pour construire des paramètres d'objet.
const buildParams = (input, paramKey, paramValue) => typeof paramValue !== 'undefined' ? { ...input, [paramKey]: paramValue } : input;
let params = { stage: 'PRODUCTION' };
params = buildParams(params, 'severity', nextProps.selectedSeverity);
params = buildParams(params, 'start', nextProps.startDate);
params = buildParams(params, 'end', nextProps.endDate);
axios.get('/inventory_reporter_api/logs', params)
Vérifiez simplement si ces valeurs existent et construisez la chaîne d'URL?