J'utilise l'API context et j'ai ceci dans mon fichier de contexte: dans le composant que j'utilise, cela ne fonctionne pas car il ne sait pas quoi le procédaille.alpha3code est. Comment puis-je passer la valeur? L'Alpha3Code provient de l'URL: essentiellement , qu'est-ce que j'essaie de faire est. J'ai une liste de pays que j'ai énuméré sur la page d'accueil. Maintenant, j'essaie d'obtenir plus d'informations sur un seul pays. L'itinéraire est FWIW, voici mon fichier de contexte complet: dans le composant que j'utilise le pays Je sais que je peux le faire de la composante elle-même, mais j'apprends comment utiliser l'API context, alors je ' M Traiter tous les appels d'API dans mon contexte. L'API que je fais utiliser est ici Project github lien localhost: 3000 / pays / ASA où asa est l'alpha3code, comment puis-je obtenir cette valeur? / Pays /: Alpha3Code alpha3code est obtenu de l'API. , j'ai:
const {pays} = usecontext (CountryContext);
3 Réponses :
Vous pouvez utiliser Quelque chose comme ceci: P> USEparams code> Crochet pour obtenir tout ce dont vous avez besoin dans votre fournisseur de contexte. DOCS
useparams code> dans le fichier dans lequel votre composant de fournisseur est LI>
CountryContextProvider CODE> Ajoutez ceci en haut du composant: LI>
ol>
UTILISEFFECT CODE> Qui a besoin ProPs.Match Code> LI>
OL> useEffect(() => {
async function getSingleCountryData() {
const result = await axios(
`https://restcountries.eu/rest/v2/alpha/${alpha3Code.toLowerCase()}`
);
console.log(result)
setCountry(result.data);
}
if (alpha3Code) getSingleCountryData(); // or if you need `match` - do not destructure useParams()
}, [alpha3Code]);
Si j'importe Useparams dans le fichier dans lequel votre composant de fournisseur est, dans mon cas: src / pages / détails.js , je reçois une définition mais non utilisée, comment puis-je l'utiliser? Dans ma répétition, j'utilise le accessives mais rien ne se passe, retourne toujours vide
Il a dit à l'étape 2: "Dans votre paysContextProvider, ajoutez ceci à ..."
Je suis désolé, je ne comprends pas ce que tu veux dire par là :(
Cela signifie qu'il devrait être à l'intérieur de ces supports bouclés: Exporter la fonction de fonction par défautContextProvider (accessoires) {...} avant ou juste après USESTE lignes
J'ai eu un: TypeError: Usecontext (...) est indéfini
Avez-vous réussi le contexte?
Que voulez-vous dire, passez au contexte?
Usecontext (CountryContext)
Eh bien, je ne suis pas sûr, mais j'ai const {pays} = useContext (CountryContext); dans mon Détails.js où je suppose les résultats de l'API . Je ne sais pas si c'est ce que tu veux dire
En fait, vous devriez avoir const {pays, pays} = useContext (CountryContext); - Mais vous pourriez utiliser des constantes que vous n'avez pas besoin de
Je n'ai pas besoin pour les pays qui renvoient tous les pays. J'utilise déjà ça et ça marche. Consultez mon code, c'est le premier useeffect que je fais et j'utilise les pays de mon /src/pages/home.js fichier
En ce qui concerne votre erreur, vérifiez que le composant utilise un fournisseur de contexte context-inside.
J'ai le chemin de cette façon: chemin = '/ pays /: alpha3code'
Dans le composant que j'utilise, cela ne fonctionne pas car il ne sait pas ce que le procédé.match.alpha3Code est. Comment puis-je passer la valeur? le alpha3code vient de l'URL: localhost: 3000 / pays / asa où ASA est l'alpha3code,
Comment puis-je obtenir cette valeur forte>? P> Je suppose que la racine de votre problème est celle-ci. Vous n'avez aucune idée du paramètre code> aplha3code code>. J'ai divisé dans votre repo Github pour le rendre plus clair. P>
- Premier,
correspondant code> est l'un des termes fournis par réacteur-routeur. Lorsque vous utilisez quelque chose commeapps.match, apps.history, apps.Location code>, vous devez disposer de votre composant enveloppé par lewithRouter code>, qui est un composant d'ordre supérieur fourni par réacteur-routeur code>. Vérifiez-le à WithRouter . Par exemple, ci-dessous est l'utilisation code> withRouter code> fourni par réact-routeur: li> OL>import React, from 'react'; import { useCountryContext } from '../contexts/CountryContext'; const Details = (props) => { const { country } = useCountryContext(); ... }
J'ai essayé ce que vous avez suggéré, mais cela n'a pas fonctionné. Got TypeError: USecontext (...) est indéfini . Pas sûr, si je le fais bien. J'ai mis à jour le repo si vous voulez jeter un oeil :)
Tout d'abord, je pense que vous êtes toujours frais pour réagir et réagir-routeur. Par conséquent, vous devriez supprimer l'API de contexte et jouer avec des choses réactives de routeur telles que withrouter hoc en premier. Une fois que vous vous êtes habitué au monde réactif, c'est lorsque le contexte API, les crochets viennent à la sauvetage. UPVote et Mark acceptent si vous trouvez mon conseil utile!
Hé là-bas, je suis jumelé dans vos mises à jour. Je pense que je l'ai eu ici. Attendez ma mise à jour!
@Peoray Hey là-bas, j'ai mis à jour ma réponse. Veuillez consulter Mettre à jour 1 de la réponse de Peoray pour plus de détails. Je pense que tout va bien maintenant. N'oubliez pas de uploter et de ne pas accepter si vous le trouvez utile!
Avez-vous essayé cela et cela a fonctionné? Parce que la méthode précédente fonctionnait très bien pour le fichier home.js . En outre, je ne suis pas nouveau pour réagir :), Just Nouveau pour les mises à jour, mon travail de jour est Vue, alors j'essaie de revenir à la vitesse avec réaction :)
Voici une codesandbox Codesandbox.io/s/github/peoray/where- Dans le monde
J'ai mis à jour ma réponse à nouveau. J'espère que c'est la dernière fois, le reste est à vous. Veuillez vérifier Mettre à jour 2 de la réponse de Peoray pour plus de détails. S'il vous plaît soyez reconnaissant en éteignant ou en marquant acceptez! Merci!
Cela ressemble à une bonne réponse. J'ai supprimé un peu de distinction - tandis que cela pourrait bien avoir été correct dans ce cas, il n'est pas pertinent pour les nombreux autres lecteurs qui apprendront de cette réponse à l'avenir. Nous décourageons également de demander des votes ici - alors qu'il est d'espérer que les auteurs de la question reconnaissante accepteront / uppote, nous préférerions ne pas voir voter / méta-commentaire dans les messages (c'est bon dans des commentaires si vous pensez que l'OP ne connaît pas l'acceptation système, mais va facile dessus).
Vous pouvez mettre à jour le contexte à partir d'un composant à l'aide d'un composant en passant une fonction de réglage qui met à jour l'état de contexte.
const Details = ({ match }) => {
const {
params: { alpha3Code }
} = match;
const { country, setPath } = useContext(CountryContext);
useEffect(() => {
setPath(alpha3Code);
}, [alpha3Code]);
return (
<main>Some JSX here</main>
);
};
export default withRouter(Details);