React Hooks Mobx:无效的钩子调用.Hooks 只能在函数组件内部调用 [英] React Hooks Mobx: invalid hook call. Hooks can only be called inside of the body of a function component

问题描述

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

从'classnames'导入类名；从'mobx-react'导入{观察者}；导入 React, { useState } from 'react';从'react-router-dom'导入{链接}；从 '../../../store/ViewStore' 导入 ViewStore；接口 INavbarProps {视图商店:视图商店；}const Navbar = 观察者((道具:INavbarProps)=> {const { 认证} = props.viewStore;const [drawerIsOpen, setState] = useState(false);功能切换菜单(){抽屉是打开的?设置状态(假):设置状态(真)；}返回 (<div><链接到="/">主页</链接><Link to="/admin">Admin</Link><链接到="/all">所有</链接>{认证?<Link to="/">注销</Link>:<Link to="/login">登录</Link>}<div onClick={toggleMenu}>打开菜单

<div className={classnames('抽屉', {drawer_open: drawerIsOpen,})}/><div onClick={toggleMenu} className={drawerIsOpen ?'背景' : ''}></div>

);});导出默认导航栏；

解决方案

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

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

package.json

<代码>{依赖关系":{"mobx-react": "6.0.0-rc.4"}}

I am using React Hooks and when I wrap my component with observer from mobx, I am getting this error. What can be the problem? Is it possible to use mobx with 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;

解决方案

It's currently not supported to use hooks with the mobx-react package since it creates a class component under the hood.

You can use the 6.0.0 release candidate that will be released soon, which does support hooks.

package.json

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

这篇关于React Hooks Mobx:无效的钩子调用.Hooks 只能在函数组件内部调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！