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

Posted 2023-02-22

【中文标题】React Hooks Mobx：无效的钩子调用。 Hooks 只能在函数组件的主体内部调用

【英文标题】：React Hooks Mobx: invalid hook call. Hooks can only be called inside of the body of a function component

【发布时间】：2019-09-07 14:55:20

【问题描述】：

我正在使用 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;

【参考方案1】：

MobX 观察者将在后台生成一个类组件。

根据here，您可以通过以下方式解决此问题：

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

代替：

observer((props) => rendering)

示例

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

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

【讨论】：

谢谢！什么是 Observer 组件，如何将它应用到我的代码中？

更新了答案。或者，请参阅@Tholle 的答案以获得更好的长期解决方案。

【参考方案2】：

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

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

package.json

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