MobX React不重新渲染

Question

我正在尝试实施MobX - React App。但无法更新/重新渲染值。存储似乎正确加载，它正在标签中设置初始值。但任何进一步的价值变化都没有得到反映。

OrganisationNameStore商店：

import {action, observable} from 'mobx';
import OrganisationName from '../modules/OrganisationName';

export class OrganisationNameStore{
    @observable public orgName: OrganisationName = new OrganisationName();

    @action.bound
    public clear(): void{
        this.orgName = new OrganisationName();
    }

    @action.bound
    public handleTextChange(event: React.FormEvent<HTMLInputElement>) {
        this.orgName.name = event.currentTarget.value;
    }  
}

// Interface is required for TypeScript to be Type safe
export interface IOrganisationNameStore {
    orgName: OrganisationName;
    clear(): void;
    handleTextChange(event: React.FormEvent<HTMLInputElement>): void;
    getOrganisationName(): string;
}

父商店文件：

import { OrganisationNameStore } from './OrganisationNameStore';

// Have all the stores here
export const stores = {
    organisationNameStore: new OrganisationNameStore(),
};

OrganisationName类：

export default class OrganisationName {
    public name!: string;

    constructor () {
        this.clear = this.clear.bind(this);  
        this.clear();     
    }

    public clear(): OrganisationName {
        this.name = 'Mobx Text 1';            
        return this;
    }
}

指数：

import React from 'react';
import './index.css';
import * as serviceWorker from './serviceWorker';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import { stores } from './stores/store';
import App from './App';

ReactDOM.render(
    <Provider {...stores}>
        <App />
    </Provider>
    , document.getElementById('root')    
);

serviceWorker.unregister();

App.tsx文件：

import React from 'react';
import './App.css';
import { observer, inject } from 'mobx-react';
import {IOrganisationNameStore} from './stores/OrganisationNameStore'

interface IAppProps /*extends WithStyles<typeof styles> */{
  organisationNameStore?: IOrganisationNameStore // MobX Store

}

@inject('organisationNameStore')
@observer
class App extends React.Component<IAppProps> {
  constructor(props: IAppProps) {
    super(props);
  }

  render() {
    return (
      <div className="App">
        <input
          type="text"
          // value={this.props.organisationNameStore!.orgName.name}
          name="name"
          onChange={this.props.organisationNameStore!.handleTextChange}
        />
        <div>
          <label>{this.props.organisationNameStore!.orgName.name}</label>
        </div>
      </div>
    );
  }
}

export default App;

tsconfig.tsx：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": [
      "es6",
      "dom",
      "esnext.asynciterable"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "include": [
    "src"
  ]
}

.babelrc：

{
    "presets": ["@babel/preset-react"],
    "plugins": [
      "transform-runtime","transform-decorators-legacy"
      // ["@babel/plugin-proposal-decorators", { "legacy": true }],
      // ["@babel/plugin-proposal-class-properties", { "loose": true }]

    ]
  }

没有控制台错误。

预期的行为 - 我希望在输入App.tsx文件中的输入时更新标签值。

如果我执行此操作错误，请纠正我？

Answer 1

正如meststrate在这里所说：https://stackoverflow.com/a/39959958/829154

MobX仅在将普通对象分配给可观察对象时自动将其转换为可观察对象。一个数组，因为对于类实例，它可能会干扰该类的内部。

见：https://mobxjs.github.io/mobx/refguide/object.html，第二个子弹

所以你应该在你的OrganisationNameStore类中将name标记为@observable。