Блог

Я получаю ошибку маршрута React сразу же, как только ввожу ссылку на код в хранилище Mobx ( const len ). Например:

 import React, { Component } from "react";
import { observer, inject } from 'mobx-react';

@inject('store') @observer class App extends Component {
  render() {
    const len = store.goods.length
    return (
      <div>
        <h1>App is there</h1>
        <fieldset>
          <legend>Done</legend>
          { len }
        </fieldset>
      </div>
    );
  }
}
  

Если я удалю его (store.goods.длина), она работает, если она есть, я не могу добраться ни до какого маршрута. Это выдает мне следующую ошибку:

 The above error occurred in the <App> component:
    in App (created by inject-App-with-store)
    in inject-App-with-store (created by Route)
    in Route (created by View)
    in Provider (created by View)
    in View
    in Router (created by BrowserRouter)
    in BrowserRouter
  

<Provider/> здесь взято из mobx.

Обновить

После того, как я добавил декоратор @withRouter перед App class объявлением, эта ошибка в консоли исчезла. Но это не решило проблему, поскольку на данный момент он просто не может отобразить маршрут, сообщая, например:

 Cannot GET /notes
  

Кто-нибудь сталкивался с таким случаем?

Не могли бы вы опубликовать, о чем говорится в части «Вышеуказанная ошибка произошла […]»? Но если я могу предположить, может быть, вы обращаетесь к хранилищу, не объявив его в компоненте? Для меня это выглядит так, как будто вы должны получить к нему доступ следующим образом:

 @inject('store') @observer class App extends Component {
  render() {
    const len = this.props.store.goods.length
    return (
      <div>
        <h1>App is there</h1>
        <fieldset>
          <legend>Done</legend>
          { len }
        </fieldset>
      </div>
    );
  }
}
  

Возможно, было бы неплохо добавить туда также некоторую проверку null / undefined, если только вы не гарантируете, что товары являются частью магазина.