Javascript 将函数从上下文传递到组件以更新上下文中的状态

我在将设置上下文中状态的函数从上下文传递到组件时遇到问题。当我在控制台上记录该函数时，该函数返回时未定义，但当我在控制台上记录它们时，上下文中的所有其他内容都会显示出来。它应该从Header组件更新我的上下文中的“display”状态。我试图找到解决堆栈溢出的方法，但到目前为止没有任何效果。

---

一些小问题，键入了

index.js

自动关闭

和无用的默认值，因为它被状态替换。更改了菜单索引中有一个小的语法错误。这就是索引的外观。请看一下PortProvider

ReactDOM.render(
  <BrowserRouter>
    <PortProvider>
    <App />
    </PortProvider>
  </BrowserRouter>,
  document.getElementById("root"),
  console.log(PortProvider)
);

ReactDOM.render(
,
document.getElementById（“根”），
console.log（端口提供程序）
);

原件：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App/App";
import { BrowserRouter } from "react-router-dom";
import { PortProvider } from "./Context/Context";

ReactDOM.render(
  <BrowserRouter>
    <PortProvider/>
    <App />
    <PortProvider/>
  </BrowserRouter>,
  document.getElementById("root"),
  console.log(PortProvider)
);

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
从“/App/App”导入应用程序；
从“react router dom”导入{BrowserRouter}；
从“/Context/Context”导入{PortProvider}；
ReactDOM.render(
,
document.getElementById（“根”），
console.log（端口提供程序）
);

您能提供一个代码沙盒供我们调试吗？让我检查一下

setDisplay

是您想要的方法吗？是的，它没有正确地传递到组件，只是找到了它。是索引中的语法错误。谢谢你的帮助！当我这样做时，我会得到以下错误：``第161:36行：解析错误：意外标记159 |/}；160 |返回（>161 | ^162{this.props.children}163 | 164 |）```这是一条

systax错误消息

，请注意语法错误。您好，我刚刚注意到您的值对象在关闭后缺少

'

。因此它会导致语法错误。这也是我所指出的。但我认为这一点。上下文应该是未定义的。您仍然应该看到我答案中的代码。将setDisplay逻辑简化为一条语句，render中的value对象完全不需要，因为它是状态的副本。欢迎

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App/App";
import { BrowserRouter } from "react-router-dom";
import { PortProvider } from "./Context/Context";

ReactDOM.render(
  <BrowserRouter>
    <PortProvider/>
    <App />
    <PortProvider/>
  </BrowserRouter>,
  document.getElementById("root"),
  console.log(PortProvider)
);