时间戳

首页 > 解决方案 > React Hooks Mobx：无效的钩子调用。Hooks 只能在函数组件的主体内部调用

reactjs - React Hooks Mobx：无效的钩子调用。Hooks 只能在函数组件的主体内部调用

问题描述

我正在使用 React Hooks，当我用 mobx 的观察者包装我的组件时，我收到了这个错误。可能是什么问题？是否可以将 mobx 与 React Hooks 一起使用？ 关于

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;

标签： reactjstypescriptmobxreact-hooks

解决方案

目前不支持在mobx-react包中使用钩子，因为它在后台创建了一个类组件。

您可以使用6.0.0即将发布的候选版本，它确实支持钩子。

包.json

{
  "dependencies": {
    "mobx-react": "6.0.0-rc.4"
  }
}

推荐阅读