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

Question

我在将上下文中的状态设置为组件的上下文中传递函数时遇到问题。当我控制台记录它时，该函数返回未定义，但是当我控制台记录它们时，上下文中的所有其他内容都会显示出来。它应该从 Header 组件更新我的上下文中的“显示”状态。我试过寻找堆栈溢出的解决方案，但到目前为止没有任何效果。 https://codesandbox.io/s/github/joeyjr95/max-kaplan-portfolio/tree/master/?fontsize=14&hidenavigation=1&theme=dark

Answer 1

索引中有一个微小的语法错误。这就是索引的外观。看看 PortProvider。

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

原文：

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)
);

Answer 2

一些小问题，index.js 中的错字自动关闭<Provider/> 和无用的默认值，因为它被状态替换。将菜单 <a> 更改为 <div>。优化setDisplay，也将其传递为toggle，然后在需要的地方使用。

<PortContext.Provider value={{ ...this.state, toggle: this.setDisplay }}>
    {this.props.children}
</PortContext.Provider>

Fixed Code Sandbox