Reactjs 反应上下文未定义

这是我第一次在Laravel中使用Reactjs。我试图在组件之间发送数据，但上下文返回为未定义。我想将数据从Product_Detail.js发送到Cart.js

globalContext.js

import React from "react";

export const MContext = React.createContext(); //exporting context object

export class MyProvider extends React.Component {
  constructor() {
    this.state = {
      message: ""
    };
  }
  render() {
    return (
      <MContext.Provider value={{ message: "kkk" }}>
        <Cart />
        <Product_Detail />
        {this.props.children} //this indicates that all the child tags with
        MyProvider as Parent can access the global store.
      </MContext.Provider>
    );
  }
}

export const MyConsumer = MContext.Consumer;

---

现在还不完全清楚你在应用程序组件中呈现了什么，但我认为问题在于你的

提供商没有正确包装你的组件

您的
应用程序
组件应如下所示：

import React from "react";
import Cart from "./components/Website/Cart";
import Product_Detail from "./components/Website/Product_Detail";
import { MyProvider } from "./components/Website/globalContext";

const App = () => {
  return (
    <MyProvider>
      <Cart />
      <Product_Detail />
    </MyProvider>
  );
};

export default App;

import React from "react";

export const MContext = React.createContext(); //exporting context object

export class MyProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ""
    };
  }
  render() {
    return (
      <MContext.Provider value={{ message: "kkk" }}>
        {this.props.children}
      </MContext.Provider>
    );
  }
}

export const MyConsumer = MContext.Consumer;

这样，在呈现
购物车
时，当您单击由
产品详细信息
呈现的按钮时，您传递给提供商的
值将被注销

另外，我假设您正在
购物车
和
产品详细信息
组件中导入React，并且您正确定义了这些组件。
建议：使用React reduxIt仅在使用类基时与my一起工作，但将提供程序放入函数时返回未定义！通过将提供程序放在函数中而不是放在类基中，您能详细说明您的确切意思吗？您还可以创建一个显示您正在描述的问题的链接，并将其链接到注释中。当我单击“添加到购物车”按钮时，该值未定义，这是链接：还有一些我以前没有评论过的内容，但为什么您有两个入口点
产品详细信息
和
购物车
。你为什么不使用通常的单个
根元素作为你的入口点呢？购物车在里面-我在这里没有提到它是为了简化问题-我想在这个产品详细信息页面和其他页面中展示它。如果我把它们放在一个入口点中，我就做不到这一点
import Cart from "./components/Website/Cart";
import Product_Detail from "./components/Website/Product_Detail";
import { MyProvider } from "./components/Website/globalContext";

import React from "react";
import Cart from "./components/Website/Cart";
import Product_Detail from "./components/Website/Product_Detail";
import { MyProvider } from "./components/Website/globalContext";

const App = () => {
  return (
    <MyProvider>
      <Cart />
      <Product_Detail />
    </MyProvider>
  );
};

export default App;

import React from "react";

export const MContext = React.createContext(); //exporting context object

export class MyProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ""
    };
  }
  render() {
    return (
      <MContext.Provider value={{ message: "kkk" }}>
        {this.props.children}
      </MContext.Provider>
    );
  }
}

export const MyConsumer = MContext.Consumer;