javascript - How to provide and consume context in the same component? - Stack Overflow

admin管理员组

文章数量:1327969

I'm using react context api for my game app and I created a GameContext.js

import React, { useState, createContext } from 'react';

const GameContext = createContext();
const GameProvider = ({ children }) => {
  const [startgame, setStartgame] = useState(false);

  return (
    <GameContext.Provider value={[startgame, setStartgame]}>
      {children}
    </GameContext.Provider>
  );
};

export { GameContext, GameProvider };

And in the App.js I provide the context.

import { GameProvider, GameContext } from './context/GameContext';

const App = () => {
    console.log(useContext(GameContext), 'Gamecontext');
    return (
      <GameProvider>

        <div className="App">
            {!startgame ? <WeleScreen />
        : <GameScreen />}
        </div>
      </GameProvider>
    );
  };
  export default App;

This doesnt work because startgame is not accessible in App.js.
Also, I noticed the useContext(GameContext) is undefined. I want to use the startgame value in App.js, but I cant destructure an undefined value. How can one provide and consume the context in the same ponent App.js? Is this the right way or am missing something?

I'm using react context api for my game app and I created a GameContext.js

import React, { useState, createContext } from 'react';

const GameContext = createContext();
const GameProvider = ({ children }) => {
  const [startgame, setStartgame] = useState(false);

  return (
    <GameContext.Provider value={[startgame, setStartgame]}>
      {children}
    </GameContext.Provider>
  );
};

export { GameContext, GameProvider };

And in the App.js I provide the context.

import { GameProvider, GameContext } from './context/GameContext';

const App = () => {
    console.log(useContext(GameContext), 'Gamecontext');
    return (
      <GameProvider>

        <div className="App">
            {!startgame ? <WeleScreen />
        : <GameScreen />}
        </div>
      </GameProvider>
    );
  };
  export default App;

This doesnt work because startgame is not accessible in App.js.
Also, I noticed the useContext(GameContext) is undefined. I want to use the startgame value in App.js, but I cant destructure an undefined value. How can one provide and consume the context in the same ponent App.js? Is this the right way or am missing something?

• javascript
• reactjs
• state

Share Improve this question Follow asked Mar 27, 2020 at 0:29 anoop chandrananoop chandran 1,51055 gold badges2525 silver badges4444 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

You need to use Context.Consumer ponent instead of useContext hook. Because when you provide a context, it will be consumable via useContext hook or this.context only within its children not parent. In that case you need to use MyContext.Consumer ponent.

import { GameProvider, GameContext } from './context/GameContext';

const App = () => {
  return (
    <GameProvider>
      <div className="App">
        <GameContext.Consumer>
          {(ctx) => (!ctx.startgame ? <WeleScreen /> : <GameScreen />)}
        </GameContext.Consumer>
      </div>
    </GameProvider>
  );
};

export default App;

From React docs:

Consumer - Requires a function as a child. The function receives the current context value and returns a React node. The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the value argument will be equal to the defaultValue that was passed to createContext().

本文标签： javascriptHow to provide and consume context in the same componentStack Overflow