UseEffect Hook с функциями не компилируется - PullRequest
Новая
       68

UseEffect Hook с функциями не компилируется

3 голосов
/ 25 сентября 2019

Я использую 'response-burger-menu' https://github.com/negomi/react-burger-menu И с помощью ловушки useContext я хочу, чтобы другая кнопка закрыла / открыла боковое меню, которое я реализовала.Моя проблема заключается в том, что я получаю следующую ошибку, следуя их документации

Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {isMenuOpen, toggleMenu, stateChangeHandler}).Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

Cart.js (именно здесь реализовано Burger-Menu) 

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' о том, как реализовать это с помощью хуков здесь , но я не могу понять,Эта проблема.Любые предложения будут высоко оценены.

...