Question

我正在使用'react-burger-menu' https://github.com/negomi/react-burger-menu 并在useContext钩子的帮助下，我想要另一个按钮来关闭/打开我已经实现的侧面菜单。我的问题是，按照他们的文档

，我收到以下错误

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

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

import React,  {useContext} from 'react'
import {MyContext} from './MyContext'
import { slide as Menu } from 'react-burger-menu'
import './Cart.css'

export default function Cart() {
  const ctx = useContext(MyContext);
  return (
    <div>
      <Menu
        right
        width={350}
        isOpen={false}
        onStateChange={state => ctx.stateChangeHandler(state)}
        customBurgerIcon={
          <i className="fa fa-shopping-cart" aria-hidden="true" />
        }
        burgerButtonClassName={"cartButton"}
      >
        <h1>Your Cart</h1>
        <button onClick={ctx.toggleMenu}>Toggle menu</button>
      </Menu>
    </div>
  );
}

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

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

Navigation.js ，这就是我包装提供程序的方式。没关系。

<MyProvider>
  <Cart />
</MyProvider>

我一直在遵循'burger-menu'中的官方文档，该文档如何使用钩子here来实现此目的，但是我似乎无法弄清楚这个问题。任何建议将不胜感激。

具有功能的UseEffect Hook无法编译

0 个答案: