我的产品上下文不断显示为未定义

Question

我试图在上下文中使用上下文，因为自从我使用它以来已有一段时间。当我打印出productConsumer变量时尝试调试，但未定义。谁能帮我解决这个问题？

import { ProductContext } from '../../pages/oniContext';
function Contact(props) {
    const productConsumer = useContext(ProductContext);

  useEffect(() => {
   console.log("ProductContext",productConsumer)
  }, [ProductContext])

这是我的上下文文件

import React, { Component } from 'react';

const ProductContext = React.createContext();



export default class ProductProvider extends Component {
                 state = {
                   name: '',
                   number: '',
                   message: '',
                   email: '',
                   messageSent: false,
                 };

                 render() {
                   return (
                     <ProductContext.Provider
                       value={{
                         ...this.state,

                       }}
                     >
                       {this.props.children}
                     </ProductContext.Provider>
                   );
                 }
               }

const ProductConsumer = ProductContext.Consumer;

export { ProductProvider, ProductConsumer, ProductContext };

Answer 1

[忘记包装我的主要APP组件AS Amila Said另外