ReactJS & MobX: TypeError: ... не является функцией - но так ли это? - PullRequest
Новая
       20

ReactJS & MobX: TypeError: ... не является функцией - но так ли это?

3 голосов
/ 14 марта 2019

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. Тем не менее, вы можете видеть, что hideSidenav и showSidenav существуют в SidenavStore.js.

Что я ссылаюсь или делаю неправильно? Любое руководство будет высоко ценится.

1 Ответ

3 голосов
/ 14 марта 2019

Вы в настоящее время импортируете модель и пытаетесь ее использовать.Вместо этого вы хотите получить экземпляр из вашего Provider с помощью inject и использовать его из реквизита. 

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));
...