Question

我已经设置了一个新的样本/样板项目，用于测试使用Meteor和React＆amp; 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创建一个自定义编辑器。我添加了一个监听自动运行来重新组合组件。

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

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

1 个答案: