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

#javascript #reactjs #react-router #jsx #mobx

#javascript #reactjs #реагировать-маршрутизатор #jsx #mobx

Вопрос:

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;

Страница ошибок использует 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:

В данный момент вы импортируете модель и пытаетесь ее использовать. Вместо этого вы хотите получить экземпляр из вашего 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));