web-dev-qa-db-fra.com

Mise à jour React Contexte à l'aide d'un REST Appel API dans une composante fonctionnelle

J'essaie de mettre à jour le contexte d'A React à l'aide des données résultant d'un appel API à A REST API à l'arrière. Le problème est que je ne peut pas synchroniser la fonction.

J'ai essayé cette solution suggérée dans ce blog post-post https://medium.com/@____davidflanagan/react-hooks-context-state-and-effects-aa899d8c8014 mais ça ne marche pas pour mon Cas.

Voici le code pour le texteContext.js

import React, {useEffect, useState} from "react";
import axios from "axios";

var text = "Test";

fetch(process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => {
      text = json;
    })




const TextContext = React.createContext(text);
export const TextProvider = TextContext.Provider;
export const TextConsumer = TextContext.Consumer;

export default TextContext

Et c'est le composant fonctionnel où j'essaie d'accéder aux données du contexte

import TextProvider, {callTextApi} from "../../../../services/textService/textContext";
function  Profile()
{

  const text = useContext(TextProvider);
  console.log(text);
  const useStyles = makeStyles(theme => ({
    margin: {
      margin: theme.spacing(1)
    }
  }));

Je peux voir la demande de récupération d'obtenir les données de la section réseau de la console du navigateur, mais le contexte ne se met pas à jour.

J'ai essayé de faire cela dans le texteContext.js.

export async function callTextApi () {
  await fetch(process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => {
      return json;
    })
}

Et j'essayais d'obtenir les données dans le profil.js à l'aide de la fonction UseEffect comme si

 const [text, setText] = useState(null);
  useEffect(()=> {
    setText (callTextApi())
  },[])

C'est ma première fois avec réact.Context et c'est assez déroutant. Qu'est-ce que je fais mal ou manque?

reactjsreact-context
9
Octavian

La première chose que je vois, c'est que vous ne retournez pas la promesse dans votre fonction qui conduira à la définition de l'état à un peu défini.

J'ai ajouté la déclaration de retour ci-dessous:

export async function callTextApi () {
  return await fetch(process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => {
      return json;
    })
}

De plus, votre dernière chaîne peut être nettoyée un peu et je suis sûr que vous pouvez supprimer l'instruction attendue dans une fonction Async lors de votre retour une promesse. Il sera automatiquement attendu:

export async function callTextApi () {
  return fetch(process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => json)
}

La deuxième étape consisterait à regarder votre useEffect crochet. Vous voulez setText après la promesse de l'appel de l'API a été résolu. Vous devez donc faire la fonction de rappel de useEffect asynchrone aussi.

  useEffect(async ()=> {
    const newText = await callTextApi();
    setText (newText);
  },[])

La troisième étape consisterait à examiner comment utiliser correctement l'API de contexte et le crochet useContext. Le crochet useContext prend un contexte en tant que paramètre, mais vous avez passé le contextProvider comme argument.

const text = useContext(TextContext);

Le contexte et le fournisseur de contexte sont deux entités différentes dans le React World. Pensez au contexte comme état et fonctionnalité que vous souhaitez partager sur votre demande (comme un État global) et À propos du fournisseur En tant que composant de réagisme qui gère un contexte et offre cet état de contexte à ses composants enfants.

return(
<TextContext.Provider value={/* some value */}>
    {children}
</TextContext.Provider>);

C'est la manière dont une déclaration de retour d'un composant de fournisseur ressemblerait et je pense que ce code est actuellement manquant dans votre application.

0
Andre