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

Question

我已经设置了一个新的 sample/boilerplate 项目来测试使用 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

我看到了 'updating...' 消息，因此组件正在重新渲染，但它似乎仍处于旧状态。我确实将 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 - 不重新渲染状态更新

React + MobX - not re-rendering update to state

reactive-programming

observable

meteor

reactjs

mobx