MobX React 不重新渲染

Question

我正在尝试实现 MobX - React 应用程序。但是在更新/重新呈现值时遇到问题。 Store 似乎加载正确，它正在标签中设置初始值。但任何进一步的价值变化都没有得到反映。

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(),
};

组织名称class：

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

正如 mweststrate 在这里所说：

MobX only converts plain objects automatically to observable objects when assigning them to e.g. an array, because for class instances it might interfere with the internals of that class otherwise.

See: https://mobxjs.github.io/mobx/refguide/object.html, second bullet

所以您应该在您的 OrganisationNameStore class.

中将 name 标记为 @observable

MobX React 不重新渲染

MobX React Not re-rendering

reactjs

mobx

mobx-react