使用mobx时，在应用程序中路由错误

Question

当我输入到Mobx商店的代码链接（const len）时，我立即得到一个React路由错误。例如：

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.lenght），它可以工作，如果它在那里，我无法到达任何路线。它暴露了以下错误：

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。

UPDATE

在@withRouter声明之前我添加了装饰器App class后，控制台中的错误消失了。但这并没有解决问题，因为现在它只是无法显示路线，告诉我，例如：

Cannot GET /notes

有没有人遇到这种情况？

Answer 1

你可以发布“上面发生的错误[...]”部分的内容吗？但是，我猜测，可能是你正在访问商店而没有在组件中声明它？对我来说，看起来你应该像这样访问它：

@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>
    );
  }
}

除非你绝对保证货物是商店的一部分，否则也可以在那里添加一些空/未定义的检查。