ReactJS & MobX: TypeError: ... 不是一个函数 - 但它是吗？

Posted 2023-02-21

【中文标题】ReactJS & MobX: TypeError: ... 不是一个函数 - 但它是吗？

【英文标题】：ReactJS & MobX: TypeError: ... is not a function - but it is?

【发布时间】：2019-08-05 15:45:18

【问题描述】：

SidenavStore.js - 定义 Sidenav 是否可见，默认为 true：

const SidenavStore = types
  .model('SidenavStore', 
    isSidenavVisible: types.optional(types.boolean, true),
  )
  .actions(self => (    
    hideSidenav: () =>  self.isSidenavVisible = false; ,
    showSidenav: () =>  self.isSidenavVisible = true; ,
  ));

export default SidenavStore;

ErrorPage 使用 SidenavStore 来决定是否显示 Sidenav。

import sidenavStore from '../../../stores/SidenavStore';

class ErrorPage extends React.Component 
  componentDidMount() 
    sidenavStore.hideSidenav();
  

  componentWillUnmount() 
    sidenavStore.showSidenav();
  

  render() 
    return (
      <div>
        <h1>My Content Here</h1>
      </div>
    );
  

而在App.jsx中，适用的代码：

const sidebarStore = SidebarStore.create();

const App = () => (
  <BrowserRouter>
    <Provider sidebarStore=SidebarStore>
      <Main>
        code here
      </Main>
    </Provider>
  </BrowserRouter>
);

export default App;

所以我的问题是这样的：

在浏览器中，我收到错误 TypeError: _stores_SidenavStore__WEBPACK_IMPORTED_MODULE_8__.default.hideSidenav is not a function。然而，您可以看到在 SidenavStore.js 中同时存在 hideSidenav 和 showSidenav。

我引用了什么或做错了什么？任何指导将不胜感激。

【问题讨论】：

您登录sidenavStore 了吗？你看到hideSidenav 方法了吗？

登录？什么意思？

console.log(sidenavStore)

【参考方案1】：

您当前正在导入模型并尝试使用它。相反，您希望使用 inject 从您的 Provider 获取实例并从道具中使用它。

import  observer, inject  from "mobx-react";

class ErrorPage extends React.Component 
  componentDidMount() 
    this.props.sidenavStore.hideSidenav();
  

  componentWillUnmount() 
    this.props.sidenavStore.showSidenav();
  

  render() 
    return (
      <div>
        <h1>My Content Here</h1>
      </div>
    );
  


export default inject("sidebarStore")(observer(ErrorPage));