web-dev-qa-db-ja.com

ストア 'someStore'は利用できません！一部のプロバイダーから提供されていることを確認してください

React、TypeScript、MobXで新しいプロジェクトを構築しようとしています。

何らかの理由で、MobXを動作させることができません。これは比較的単純なコードですが、このエラーが発生します。

キャッチされないエラー：MobXインジェクター：ストア 'appState'は使用できません！プロバイダーによって提供されていることを確認してください

これは私のコードです：

AppState.ts

import {observable} from "mobx"
import {observer} from "mobx-react"

export class AppState {
    @observable public greeting = "hello World"
}

index.tsx

import * as React from "react"
import * as ReactDOM from "react-dom"
import { Provider } from "mobx-react"
import { Router, Route, Switch } from "react-router"
import { createBrowserHistory } from "history"
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"
"./containers/BookingStep/BookingStepContainer";
import { TestContainer } from "./containers/TestContainer";
import { AppState } from "./store/AppState";

const history = createBrowserHistory()

ReactDOM.render(
  <Provider store={AppState}>
    <Router history={history}>
      <Switch>
        <MuiThemeProvider>
          <div>
            <Route path="/test" component={TestContainer} />
          </div>
        </MuiThemeProvider>
      </Switch>
  </Router>
</Provider>,
document.getElementById("root"))

TestContainer.tsx

import * as React from "react"
import { inject } from "mobx-react"
import { AppState } from "../store/AppState"

export interface ITestContainerProps {
    appState?: AppState
}

@inject("appState")
export class TestContainer extends React.Component<ITestContainerProps, any> {

    public render() {
        const { children, appState } = this.props

        return (
            <div>
                {appState.greeting}
            </div>
        )
    }
}

誰かが私が欠けているものを指摘できますか？

reactjstypescriptmobx-react
6
Englund0110

インジェクタにappStateという名前のストアを探すように要求していますが、Providerに指定したのはstoreという名前のストアです。この行を変更する必要があるようです：

<Provider store={AppState}>

に：

<Provider appState={AppState}>
9
ethan.roday