web-dev-qa-db-fra.com

Comment changer le contexte React par programmation?

J'essaie d'utiliser le nouveau contexte React pour stocker des données sur l'utilisateur connecté.

Pour ce faire, je crée un contexte dans un fichier appelé LoggedUserContext.js:

import React from 'react';


export const LoggedUserContext = React.createContext(
  );

Et bien sûr, maintenant je peux accéder à ce contexte dans d'autres composants en utilisant des consommateurs, comme je le fais ici par exemple:

  <LoggedUserContext.Consumer>
       {user => (
       (LoggedUserContext.name) ? LoggedUserContext.name : 'Choose a user or create one';
       )}
   </LoggedUserContext.Consumer>

Mais évidemment, pour que ce système soit utile, je dois modifier mon contexte après la connexion, afin qu'il puisse contenir les données de l'utilisateur. Je fais un appel à une API REST utilisant axios, et je dois affecter les données récupérées à mon contexte:

axios.get(`${SERVER_URL}/users/${this.state.id}`).then(response => { /*What should I do here?*/});

Je ne vois aucun moyen de le faire dans la documentation de React, mais ils mentionnent même que la tenue des informations d'un utilisateur connecté est l'un des cas d'utilisation qu'ils avaient en tête pour les contextes:

Le contexte est conçu pour partager des données qui peuvent être considérées comme "globales" pour une arborescence de React, tels que l'utilisateur authentifié actuel, thème ou langue préférée. Pour Par exemple, dans le code ci-dessous, nous enfilons manuellement un accessoire "thème" afin de styliser le composant Button:

Alors comment faire?

javascriptreactjsloginreact-context
8
kace91

Pour utiliser Context, vous avez besoin d'un Provider qui prend une valeur, et cette valeur peut provenir de l'état du composant et être mise à jour

par exemple

class App extends React.Component {
   state = {
      isAuth: false;
   }
   componentDidMount() {
      APIcall().then((res) => { this.setState({isAuth: res}) // update isAuth })
   }
   render() {
       <LoggedUserContext.Provider value={this.state.isAuth}>
           <Child />
       </LoggedUserContext.Provider>
   }
}

La section sur contexte dynamique l'explique

13
Shubham Khatri

Enveloppez votre composant consommateur dans un composant fournisseur:

import React from 'react';

const SERVER_URL = 'http://some_url.com';

const LoggedUserContext = React.createContext();

class App extends React.Component {
    state = {
        user: null,
        id: 123
    }
    componentDidMount() {
        axios.get(`${SERVER_URL}/users/${this.state.id}`).then(response => { 
            const user = response.data.user; // I can only guess here
            this.setState({user});
        });
    }
    render() {
        return (
            <LoggedUserContext.Provider value={this.state.user}>
                <LoggedUserContext.Consumer>
                    {user => (
                        (user.name) ? user.name : 'Choose a user or create one';
                    )}
                </LoggedUserContext.Consumer>
            </LoggedUserContext.Provider>
        );
    }
}

J'ai donné un exemple complet pour le rendre encore plus clair (non testé). Voir la documentation pour un exemple avec une meilleure composition des composants.

3
Hinrich