使用 mobx 时反应应用程序中的路由错误答案

【问题标题】：Route error in react app while using mobx使用 mobx 时反应应用程序中的路由错误
【发布时间】：2019-03-07 15:21:02
【问题描述】：

当我将代码链接放入 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。

更新

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

Cannot GET /notes

有人遇到过这种情况吗？

【问题讨论】：

标签： reactjs mobx react-routing

【解决方案1】：

您能否发布“发生上述错误 [...]”部分的内容？但如果我猜到，可能是您在访问 store 时没有在组件中声明它？在我看来，您应该像这样访问它：

@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 检查，除非您绝对保证商品是商店的一部分。

【讨论】：