Reactjs TypeError:\u useContext未定义

我在React中begginer，我试图用

useContext

和

createContext

制作一些东西，我认为我的代码模式很好，但可能我错过了一些东西。我试图找到关于我的错误的信息，但我发现我在react中的知识水平无法理解。也许这篇文章有一条路径，在循环开始时没有初始化值的上下文中谈论

useContext

当我在控制台上使用组件时 返回

对于下面代码中的行

constp5wrapper=props=>{

useContext（）

从“React”导入React；
从“react”导入{useRef，useffect}；
从“react”导入{useState}；
从“react”导入{useContext}；
从“道具类型”导入道具类型；
从“p5”中导入p5；
从“/p5_管理器”导入p5管理器；
//@见https://www.robinwieruch.de/react-derive-state-props
//@见https://kentcdodds.com/blog/how-to-use-react-context-effectively
常量P5Wrapper=props=>{
设buf_sketch=null；
设{sketches，set_sketches}=useContext（P5Manager）；
函数集_data（）{}
常量草图_ref=useRef（）；
useffect（（）=>{
buf_草图=新p5（道具草图，草图参考当前）；
if（buf_sketch.set_数据和道具数据）{
基本草图设置数据（道具数据）；
}
设置草图（buf草图）；
}, []);
//从react更新草图
如果（草图）{
if（草图集数据和道具数据）{
草图。集合数据（道具数据）；
}
}
返回；
};
P5Wrapper.propTypes={
草图：需要PropTypes.func.isRequired，
};
导出默认包装器；

createContext（）

从“React”导入React；
从“react”导入{createContext}；
从“react”导入{useState}；
设P5Context=createContext（）；
常量p5管理器=（{children}）=>{
常量[草图，设置草图]=useState（null）；
返回(
{儿童}
)
);
};
导出默认值管理器；

组成部分

import React from "react";
import { useState } from "react";
import P5Wrapper from "../../components/p5_wrapper";
import P5Manager from "../../components/p5_manager";

export default function Dialogue(props) {
  const [data, set_data] = useState("You talk to me ?", props.dial);
  if (props.dial !== data[1]) {
    set_data(["You click to me?\nClick and shut your mouse", props.dial]);
  }
  return (
    <P5Manager>
      <P5Wrapper sketch={my_sketch} data={data}></P5Wrapper>
    </P5Manager>
  );
}

从“React”导入React；
从“react”导入{useState}；
从“../../components/p5_包装器”导入p5包装器；
从“../../components/p5_manager”导入P5Manager；
导出默认功能对话框（道具）{
const[data，set_data]=useState（“你在跟我说话吗？”，props.dial）；
如果（props.dial！==数据[1]）{
设置数据（[“你点击我吗？\n点击并关闭鼠标”，props.dial]）；
}
返回(
);
}

import React from "react";
import { useRef, useEffect } from "react";
import { useState } from "react";
import { useContext } from "react";
import PropTypes from "prop-types";
import p5 from "p5";
import P5Manager from "./p5_manager";

// @see https://www.robinwieruch.de/react-derive-state-props
// @see https://kentcdodds.com/blog/how-to-use-react-context-effectively

const P5Wrapper = props => {
  let buf_sketch = null;
  let { sketches, set_sketches } = useContext(P5Manager);
  function set_data() {}
  const sketch_ref = useRef();

  useEffect(() => {
    buf_sketch = new p5(props.sketch, sketch_ref.current);
    if (buf_sketch.set_data && props.data) {
      buf_sketch.set_data(props.data);
    }
    set_sketches(buf_sketch);
  }, []);

  // update sketch from react
  if (sketches) {
    if (sketches.set_data && props.data) {
      sketches.set_data(props.data);
    }
  }
  return <div ref={sketch_ref} />;
};

P5Wrapper.propTypes = {
  sketch: PropTypes.func.isRequired,
};

export default P5Wrapper;

import React from "react";

import { createContext } from "react";
import { useState } from "react";

let P5Context = createContext();

const P5Manager = ({ children }) => {
  const [sketches, set_sketches] = useState(null);
  return (
    <div>
      <P5Context.Provider value={{ sketches, set_sketches }}>
        {children}
      </P5Context.Provider>
      )
    </div>
  );
};

export default P5Manager;

import React from "react";
import { useState } from "react";
import P5Wrapper from "../../components/p5_wrapper";
import P5Manager from "../../components/p5_manager";

export default function Dialogue(props) {
  const [data, set_data] = useState("You talk to me ?", props.dial);
  if (props.dial !== data[1]) {
    set_data(["You click to me?\nClick and shut your mouse", props.dial]);
  }
  return (
    <P5Manager>
      <P5Wrapper sketch={my_sketch} data={data}></P5Wrapper>
    </P5Manager>
  );
}