我动态地将一个反应组件（通过 webpack 的 import('module').then）加载到我的包中。问题是该组件不会对 Mobx observable 的更改做出反应。如果我以正常方式导入模块，一切正常。
查看 Mobx 开发工具，我可以看到当组件被静态导入时，当我看到可观察的变化时：
更新了 'ReviewsStore@6.profile': (ReviewsStore@6.profile) (原为 (ReviewsStore@6.profile)) 预定异步反应 'Reviews#0.render()' 反应 '$Reviews#0.render()'< /p>
相反，当我使用代码拆分时，我看不到任何渲染调用：
更新了“ReviewsStore@6.profile”：（ReviewsStore@6.profile）（原为（ReviewsStore@6.profile））
贝娄是我的测试数据代码
class ReviewsStore { // My store
@observable profile = {};
@action
getProfile() {
$.ajax({ url })
.then(action((data) => {
this.profile = {
user: 'John Doe',
userid: 123,
followers: 25,
reviewsCount: 22,
reviews: [
{
body: 'Lorem ipsum ',
date: '20/12/2016',
rating: 4.5,
},
{
body: 'Lorem ipsum dolor sit',
date: '23/12/2016',
rating: 4.2,
},
],
};
}));
}
}
@observer class Reviews extends Component { // My View
constructor() {
super();
this.getProfile = this.getProfile.bind(this);
this.state = {
asyncModule: null,
};
}
getProfile(id) {
this.props.store.getProfile(id)
import('../components/reviews/user-profile')
.then(({ default: Profile }) => {
this.setState({
asyncModule: <Profile user={this.props.store.profile} />,
});
});
}
render() {
return (
<div>
{this.state.asyncModule}
</div>
);
}
}