react中动态导入的模块不会对Mobx observable做出反应

Question

我将一个 react 组件动态加载（通过 webpack 的 import('module').then）到我的包中。问题是该组件不会对 Mobx observable 的更改做出反应。如果我以正常方式导入模块，一切正常。

查看 Mobx 开发工具，我可以看到当组件被静态导入时，当我看到 observable 发生变化时：

更新了“ReviewsStore@6.profile”：（ReviewsStore@6.profile）（原为（ReviewsStore@6.profile）） 预定的异步反应‘Reviews#0.render()’ 反应‘$Reviews#0.render()’

相反，当我使用代码拆分时，我看不到任何渲染调用：

更新了“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>
    );
}

}

Answer 1

你能确认 mobx 包只包含一次吗？仅在您的基本捆绑包中，而不是在您拆分的捆绑包中？