如何从反应上下文中获取数据

Posted 2023-04-14

【中文标题】如何从反应上下文中获取数据

【英文标题】：How to get data from react context

【发布时间】：2018-12-17 07:10:21

【问题描述】：

我有一个名为 GlobalDataProvider 的 React 类：

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>
    )

我正在尝试使用另一个文件“PageSection.js”中的数据，如下所示：

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>
 );
;

但是，由于某种原因，这不起作用。我收到此错误消息：

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

我做错了什么？

我必须导入 DataProvider 类吗？还是只有 Context 变量？

【问题讨论】：

你能用console.log(JSON.stringify(context)) 转储实际的上下文吗？

我得到未定义

您必须将 Provider 实际呈现为 Consumer 的父级

你能给我代码示例吗，如果可行，我会给出最佳答案。

【参考方案1】：

我怀疑您需要将 DataContext.Consumer 作为 DataContext.Provider 的子元素。像这样的...

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>
 );
;

【讨论】：

行了，谢谢！

【参考方案2】：

尝试：

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>
 );
;

【讨论】：

控制台日志上下文未定义，因此导入导出可能有问题，这不起作用（undefined.title = undifined）

然后你的路径 import DataContext from '../data/GlobalDataProvider';可能是错的

我查过了，不是这样的。我正在导入名为“DataContext”的变量，我是否应该导入名为“DataProvider”的类（都在 GlobalDataProvider.js 中）？

是的，你需要把它包裹在消费者身上，我会更新我的代码