1

I've setup a new sample/boilerplate project for testing out using Meteor with React & MobX (using Mantra architecture). The project is at https://github.com/markoshust/mantra-matui-mobx

I'm having an issue where the state change of the State.header.title property is not properly reflecting the updated state change on re-render.

My state is built by pulling in simple objects: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/stores/route.js

Into one master observable object: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/main.js#L8

I'm listing for route change and calling an action to update state: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/reactions/route.js#L10

This action updates state: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/actions/route.js#L5

The console is logging out proper state change, so the state is being updated properly. However, the component is not being re-rendered with the updated state (this line is console.log'ing old state val): https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/containers/Header.js#L6

I'm seeing the 'updating...' message, so the component is re-rendering, but it appears to still be pulling in the old state. I did add observer to all of my react components: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/components/Header.js

4

1 回答 1

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);
}
于 2016-07-03T21:42:54.053 回答