Reactjs 我的productcontext一直显示为未定义

我试着在react中使用上下文，因为我已经用了一段时间了。当我打印出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 };

import React，{Component}来自'React'；
const ProductContext=React.createContext（）；
导出默认类ProductProvider扩展组件{
状态={
名称：“”，
编号：''，
消息：“”，
电子邮件：“”，
messageSent:false，
};
render（）{
返回(
{this.props.children}
);
}
}
const ProductConsumer=ProductContext.Consumer；
导出{ProductProvider、ProductConsumer、ProductContext}；

正如阿米拉所说，我忘了包装我的主要应用程序组件

---

正如阿米拉所说，我忘了包装我的主要应用程序组件

---

另外

我假设

ProductProvider

是

联系人的父级

？是否使用

ProductProvider

包装组件？如何

导出默认类ProductProvider

，然后

导出{ProductProvider，

又来了吗？我没有包装它，我想我只需要使用UseContext我假设

ProductProvider

是

联系人的父级

？您是否使用

ProductProvider

包装组件？如何

导出默认类ProductProvider

，然后

导出{ProductProvider，…

又来了？我没有包装它，我想我只能使用usecontext