javascript - How to get data from react context - Stack Overflow

admin管理员组

文章数量:1290946

I have a React class called GlobalDataProvider:

import React, { Component } from 'react';

const DataContext = React.createContext();
export default DataContext;

export class DataProvider extends Component {

  state = {
     title: 'Some title'
  }

  render() {
   return (
     <DataContext.Provider 
       value={{state: this.state}}>
       {this.props.children}
     </DataContext.Provider>
    )}
}

And I am trying to use data in another file "PageSection.js" like this:

import React from 'react';
import DataContext from '../data/GlobalDataProvider';

const PageSection= () =>{

return (
    <section className="page-section">
        <DataContext.Consumer>
            {(context) => (
                <h1>{ context.state.title }</h1>
            )}
        </DataContext.Consumer>
    </section>
 );
};

However this does not work for some reason. I get this error message:

TypeError: Cannot read property 'state' of undefined, 
  in PageSection.js line 11 (the line with this code: { context.state.title }). 

What am I doing wrong?

Do I have to import the class DataProvider? or only the Context variable?

I have a React class called GlobalDataProvider:

import React, { Component } from 'react';

const DataContext = React.createContext();
export default DataContext;

export class DataProvider extends Component {

  state = {
     title: 'Some title'
  }

  render() {
   return (
     <DataContext.Provider 
       value={{state: this.state}}>
       {this.props.children}
     </DataContext.Provider>
    )}
}

And I am trying to use data in another file "PageSection.js" like this:

import React from 'react';
import DataContext from '../data/GlobalDataProvider';

const PageSection= () =>{

return (
    <section className="page-section">
        <DataContext.Consumer>
            {(context) => (
                <h1>{ context.state.title }</h1>
            )}
        </DataContext.Consumer>
    </section>
 );
};

However this does not work for some reason. I get this error message:

TypeError: Cannot read property 'state' of undefined, 
  in PageSection.js line 11 (the line with this code: { context.state.title }). 

What am I doing wrong?

Do I have to import the class DataProvider? or only the Context variable?

• javascript
• reactjs
• react-context

Share Improve this question Follow edited Jul 9, 2018 at 14:58 Sarmad S. asked Jul 9, 2018 at 14:46 Sarmad S.Sarmad S. 26122 gold badges44 silver badges1515 bronze badges 4

• can you do a console.log(JSON.stringify(context)) to dump what context actually looks like? – Doug Coburn Commented Jul 9, 2018 at 14:54
• I get Undefined – Sarmad S. Commented Jul 9, 2018 at 14:57
• You have to actually render the Provider in as a parent of the Consumer – Doug Coburn Commented Jul 9, 2018 at 15:03
• 1 Can you give me code example, I will give best answer if it works. – Sarmad S. Commented Jul 9, 2018 at 15:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I suspect you need your DataContext.Consumer to be a child element of the DataContext.Provider. Something like this...

import React from 'react';
import DataContext, { DataProvider } from '../data/GlobalDataProvider';

const PageSection= () =>{

return (
    <section className="page-section">
      <DataProvider>
        <DataContext.Consumer>
            {(context) => (
                <h1>{ context.state.title }</h1>
            )}
        </DataContext.Consumer>
      </DataProvider>
    </section>
 );
};

try:

export class DataProvider extends Component {

  state = {
     title: 'Some title'
  }

  render() {
   return (
     <DataContext.Provider 
       value={this.state}>
       {this.props.children}
     </DataContext.Provider>
    )}
}






const PageSection= () =>{

return (
  <DataProvider>
    <section className="page-section">
        <DataContext.Consumer>
            {(context) => (
                <h1>{ context.title }</h1>
            )}
        </DataContext.Consumer>
    </section>
 </DataProvider>
 );
};

本文标签： javascriptHow to get data from react contextStack Overflow