React App donne une erreur lors de l'utilisation de l'API contextuelle

Question

J'apprends React et en ce moment j'essaie d'implémenter l'ancienne façon de travailler avec l'API Contexte mais quand j'essaie de compiler j'obtiens une erreur.

Il est écrit :

TypeError: context is undefined. Version is 17.0.1

Voici les fichiers que j'utilise :

Test0.js

import React from 'react';
const Test0 = React.createContext();
export default Test0;

Test1.js

import React, { Component } from 'react';
import Test0 from './Test0';

class Test1 extends Component{
render(){
    return (
            <Test0.Consumer>
                {context => (<p>This is {context.name}</p> )}
            </Test0.Consumer>
        );
}
}
export default Test1;

Test2.js

import React, { Component } from 'react';
import Test0 from './Test0';
import Test1 from './Test1';

class Test2 extends Component{
state = {
    name: 'James',
    age : 30
}
render(){
    return (
        <Test0.Provider
            value={{
                name : this.state.name,
                age: this.state.age
            }}
        >
            <Test1 />
        </Test0.Provider>
        );
}
}

export default Test2;

Je rends ensuite <Test1 /> en app.js

Answer 1

Je rends ensuite <Test1/> dans app.js

Vous devez rendre Test2 parce que vous y définissez votre fournisseur de contexte. Vous trouverez ci-dessous le lien pour le code complet.

LIEN CODESANDBOX : https://codesandbox.io/s/context-api-issue-lqkv8

Answer 2

Vous utilisez Test1 composant qui consomme Test0 un contexte dans lequel vous êtes censé fournir des valeurs, mais dans Test0 vous n'apportez aucune valeur ajoutée. Vous avez mal implémenté le fournisseur dans des Composant , Test2 que vous ne rendez pas ainsi Test0 ne connaît pas les valeurs fournies et suppose que vous n'avez pas défini le contexte.