Reactjs 带有函数的UseEffect挂钩无法编译

我正在使用“反应汉堡菜单” 在UseContextHook的帮助下，我需要另一个按钮来关闭/打开我实现的侧菜单。我的问题是，在他们的文档之后，我遇到了以下错误

对象作为React子对象无效（找到：具有键{isMenuOpen，toggleMenu，stateChangeHandler}的对象）。如果要呈现子对象集合，请改用数组

Cart.js（这是实现“汉堡菜单”的地方）

import React，{useContext}来自“React”
从“/MyContext”导入{MyContext}
从“反应汉堡菜单”导入{幻灯片作为菜单}
导入“./Cart.css”
导出默认函数Cart（）{
const ctx=useContext（MyContext）；
返回(
ctx.stateChangeHandler（状态）}
自定义汉堡图标={
}
burgerButtonClassName={“cartButton”}
>
你的车
切换菜单
);
}

MyContext.js这就是代码中断的地方。我试着删除一些代码，只发送字符串值以确保它可以正常工作，但一旦我开始使用函数，它就拒绝编译

import React, {createContext, useState} from 'react'
export const MyContext = createContext();
export const MyProvider = props => {
  const [menuOpenState, setMenuOpenState] = useState(false);
  return (
    <MyContext.Provider
      value={{
        isMenuOpen: menuOpenState,
        toggleMenu: () => setMenuOpenState(!menuOpenState),
        stateChangeHandler: newState => setMenuOpenState(newState.isOpen)
      }}
    >
      {props.children}
    </MyContext.Provider>
  );
};

import React，{createContext，useState}来自“React”
导出常量MyContext=createContext（）；
export const MyProvider=props=>{
const[menuOpenState，setMenuOpenState]=useState（false）；
返回(
setMenuOpenState（！menuOpenState），
stateChangeHandler:newState=>setMenuOpenState（newState.isOpen）
}}
>
{props.children}
);
};

Navigation.js这就是我包装提供者的方式。这应该没问题

<MyProvider>
  <Cart />
</MyProvider>

---

我一直在关注“汉堡菜单”中关于如何使用钩子实现此功能的官方文档，但我似乎无法解决这个问题。如果您有任何建议，我们将不胜感激。

代码似乎没问题，我怀疑您在尝试渲染ctx对象的某个地方缺少一段代码。

<MyProvider>
  <Cart />
</MyProvider>