Side effects like changing state are not allowed at this point

I am quite new to Mobx so I suspect this problem might not be be Firestorter specific, but I’m hoping you have clue anyway.

I have a list of document ids what I use to fetch single document data one by one. I have a store which contains a Document, of which I change the path property via a “Next” button click handler which calls an @action.bound handler on the store and sets the next id.

I initially create the document without any path, with new Document().

When the next button triggers the action and the document path is set, I wait for document.fetching to be false and pass it down to a component for rendering.

When I hit the button and the path is set, I get this from my rendering component:

Side effects like changing state are not allowed at this point. Are you trying to modify state from, for example, the render function of a React component? Tried to modify: ObservableValue@16

The problem seems to stem from the fact that I’m passing down the observable Document as-is.

 <RegistrationShortView document={store.userRegistration} />

If I instead do this (map it to my own non-observable typed document structure), all is ok:

 <RegistrationShortView
    document={{
      id: store.userRegistration.id,
      data: store.userRegistration.data as UserRegistration
    }}
 />

The component does nothing more then de-structure some of the data props and renders them.

What might be causing this issue you think?

[steeltomato]

I can’t reproduce this anymore on v0.12.1

[IjzerenHein]

Hi, this should be fixed by using the new isLoading property instead of fetching in firestorter v0.12.1. Let me know if you still run into this problem with in case isLoading doesn’t solve it. cheers