Question

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

看看Mobx dev工具，我可以看到当可观察的变化时静态导入组件时，我看到：

更新了'ReviewsStore@6.profile':( ReviewsStore@6.profile）（是（ReviewsStore@6.profile））预定的异步反应'评论＃0.render（）' 反应'$ Reviews＃0.render（）'

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

更新了'ReviewsStore@6.profile':( ReviewsStore@6.profile）（是（ReviewsStore@6.profile））

Bellow是我的测试数据代码

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包只包含一次吗？只在您的基本捆绑包中，而不是在分割的捆绑包中？

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

1 个答案: