在React中未定义上下文值

Question

为什么上下文值显示未定义？

SRC / Context.js：

import React, { Component } from 'react';

const Context = React.createContext();

export class Provider extends Component {
  state = { a: 1, b: 2 };
  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}
export const Consumer = Context.Consumer;

SRC /国家/ CountryList.js：

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

class CountryList extends Component {
  render() {
    return (
      <Consumer>
        {value => {
          console.log('val:' + value);
        }}
      </Consumer>
    );
  }
}
export default CountryList;

试图在CountryList中传递上下文值，但显示未定义，无法弄清原因。 提前致谢

Answer 1

您需要使用Provider包装CountryList组件，即需要导入Provider。

import React, { Component } from 'react';
import { Provider,Consumer } from '../../Context';

class CountryList extends Component {
  render() {
    return (
      <Provider>
        <Consumer>
          {value => {
            console.log('val:' + value);
          }}
        </Consumer>
     </Provider>
    );
  }
}
export default CountryList;

此处的Stackblitz示例： https ://stackblitz.com/edit/react-143zwt（我刚刚添加了进行测试。它会给您带来想法。我不在此处添加此代码。）