0

Quick note: I already know how to refresh a component by the methods of changing state, changing the key, and calling forceupdate.

For testing purposes, I want to simulate a page refresh, but only for one of the components on the page. The problem with typical component refresh methods is that they don't re-execute the component constructor and so they trip the Mobx "provided stores has changed" exception when I try to assign a new observable. I've tried a number of little tricks to force this, but React is very clever about not re-executing component constructors.

Here is the current code of my component (on signalling "refresh", this crashes with "MobX Provider: The set of provided stores has changed"):

const Client = React.lazy(() => import('./client/Client'));

export default class FooComponent extends React.Component<FooProps> {
    appModel: BaseGameModel;

    constructor(props: ClusterFunGameProps) {
        super(props);
        props.callBacks.set("refresh", () => { this.setup()})
        this.setup();
    }

    setup= () => {
        const { gameProperties } = this.props;
        this.appModel = new FooClientModel(gameProperties);
    }

    render() {
        const UI = this.UI;
        return (
            <Provider appModel={this.appModel}>
                <React.Suspense fallback={<div>loading...</div>}>
                    <Client />
                </React.Suspense>
            </Provider>
        );
    };
}
Eric Jorgensen
  • 1,682
  • 2
  • 14
  • 23
  • Still not quite understand what you are trying to do, which component you want to reload? The error is here because you are changing appModel value that you pass to Provider, this is expected. `React is very clever about not re-executing component constructors` this is not true, constructor will be re-executed if component is re-mounted. Everything should work fine if you change component key. Example: https://codesandbox.io/s/fancy-flower-ce5k7?file=/src/App.js – Danila Jul 02 '20 at 10:37
  • @Danila - Gee, I thought I tried that, but must have done something wrong. Works now. Thank you! – Eric Jorgensen Jul 03 '20 at 18:24

0 Answers0