React + MobX - 不重新渲染状态更新

Question

我设置了一个新的示例/样板项目，用于测试使用 Meteor 和 React 和 MobX（使用 Mantra 架构）。该项目在https://github.com/markoshust/mantra-matui-mobx

我遇到了一个问题，即 State.header.title 属性的状态更改未正确反映重新渲染时更新的状态更改。

我的状态是通过拉入简单的对象来构建的： https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/stores/route.js

进入一个主可观察对象： https://github.com/markoshust/mantra-matui-mobx/blob/master/client/main.js#L8

我正在列出路线更改并调用操作来更新状态： https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/reactions/route.js#L10

此操作更新状态： https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/actions/route.js#L5

控制台正在注销正确的状态更改，因此状态正在正确更新。但是，组件没有以更新的状态重新渲染（这一行是 console.log'ing old state val）： https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/containers/Header.js#L6

我看到“正在更新...”消息，因此该组件正在重新渲染，但它似乎仍处于旧状态。我确实将observer 添加到我的所有反应组件中： https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/components/Header.js

Answer 1

我需要为 MobX 创建一个自定义作曲家。我添加了一个监听 autorun 来重新组合组件。

https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/libs/with_mobx.js

import { compose } from 'mantra-core';
import { autorun } from 'mobx';

export default function composeWithMobx(fn, L, E, options) {
  const onPropsChange = (props, onData) => {
    const reactiveFn = () => fn(props, onData);
    autorun(reactiveFn);
    return reactiveFn();
  };
  return compose(onPropsChange, L, E, options);
}