Mobx和React渲染问题

Question

所以我有以下代码，我遇到一个特定的问题。如果我创建了一个简单的react应用程序并执行了以下代码，那么一切都会按预期进行。但是，当我在我公司的应用程序中运行它时（该应用程序使用Rails进行BE，使用React进行FE处理），此特定代码无效。这两个实验都运行了最新的mobx版本。问题是，当我单击按钮时，该组件应再次呈现，但事实并非如此。

可观察的商店

class ObservableTodoStore {

  myObservable = {};
}

decorate(ObservableTodoStore, {
  myObservable: observable
});

export default   ;

Obsevable class

class TodoList extends React.Component {

  onNewTodo = () => {
    this.props.mobxStore.myObservable = { name: "GRIS" };

  };


  render() {
    console.log("TodoList");

    return (
      <div>
        <button onClick={this.onNewTodo}>New Todo</button>
        {this.props.mobxStore.myObservable.name}
      </div>
    );
  }
}

export default inject("mobxStore")(observer(TodoList));

索引

ReactDOM.render(
  <Provider mobxStore={new ObservableTodoStore()}>
    <TodoList />
  </Provider>
  , document.getElementById("root")
)

Answer 1

Mobx recommends to use action for store changing

何时使用动作？

仅应始终使用操作修改状态的功能。只是执行查询的功能，过滤器等不应标记为动作；允许MobX跟踪他们的调用。

“执行动作”强制所有状态修改均由行动。在较大的长期代码中，这是有用的最佳做法基地。

import { action, set, observable } from 'mobx';

class ObservableTodoStore {
  @observable
  myObservable = {};

  @action.bound
  changeMyObservable(data) {
    // or this.myObservable = data;
    set(this.myObservable, data);
  }
}

反应成分中

onNewTodo = () => {
  const { mobxStore: { changeMyObservable } } = this.props;

  changeMyObservable({ name: "GRIS" });
};