React Hooks Mobx: неверный вызов хука.Хуки могут быть вызваны только внутри тела функционального компонента. - PullRequest
Новая
       20

React Hooks Mobx: неверный вызов хука.Хуки могут быть вызваны только внутри тела функционального компонента.

1 голос
/ 17 апреля 2019

Я использую React Hooks, и когда я оборачиваю свой компонент наблюдателем от mobx, я получаю эту ошибку. В чем может быть проблема? Можно ли использовать mobx с React Hooks? re

import classnames from 'classnames';
import { observer } from 'mobx-react';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import ViewStore from '../../../store/ViewStore';

interface INavbarProps {
  viewStore: ViewStore;
}

const Navbar = observer((props: INavbarProps) => {
  const { authed } = props.viewStore;

  const [drawerIsOpen, setState] = useState(false);

  function toggleMenu() {
    drawerIsOpen ? setState(false) : setState(true);
  }

  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/admin">Admin</Link>
      <Link to="/all">All</Link>
      {authed ? <Link to="/">Logout</Link> : <Link to="/login">Login</Link>}

      <div onClick={toggleMenu}>
        Open Menu
      </div>

      <div className={classnames('drawer', {
        drawer_open: drawerIsOpen,
      })} />

      <div onClick={toggleMenu} className={drawerIsOpen ? 'backdrop' : ''}></div>
    </div>
  );
});

export default Navbar;

Ответы [ 2 ]

2 голосов
/ 17 апреля 2019

В настоящее время не поддерживается использование перехватчиков с пакетом mobx-react, поскольку он создает компонент класса под капотом.

Вы можете использовать кандидат на выпуск 6.0.0, который скоро будет выпущен, который поддерживает хуки.

package.json 

{
  "dependencies": {
    "mobx-react": "6.0.0-rc.4"
  }
}
1 голос
/ 17 апреля 2019

Наблюдатель MobX приведет к компоненту класса под капотом.

Согласно здесь , вы можете обойти это, выполнив: 

(props) => <Observer>{() => rendering}</Observer>

вместо: 

observer((props) => rendering)

Пример 

import React from "react";
import { Observer } from "mobx-react";

const MobxFunctionalComponentObserver = props => (
  <Observer
    inject={stores => ({ ... })}
    render={props => (
      ... 
    )}
  />
);
...