Observer render not called when the mobx-state-tree is updated.

[simonssspirit]

Observer render not called when the mobx-state-tree is updated.

I have made an example and uploaded it in this repo for reference:

https://github.com/simonssspirit/mobx-state-tree-test-example

I have a hierarchical tree and each item is wrapped in observable as well as the main tree.

Updates are happening when updating only the top level of the tree, even if all of the child nodes are wrapped as well.

Any suggestions on why this is happening will be very helpful.

[danielkcz]

Line 94, use toJS from mobx instead of slice Since you are interacting with non-observable lib, you have to shove the whole thing in its direction, top-level only is not enough.

[simonssspirit]

@FredyC Thank you for the fast response.

I did try with toJS initially, but the result was the same.

you has to shove the whole thing in its direction, top-level only is not enough.

This code is making each node an observable, is this not enough to apply the observables on each level?

    return (<Observer key={props.itemHierarchicalIndex}>
      {() => {
        return <span>{props.item.name}</span>
      }}
    </Observer>
    )
  }

[danielkcz]

I am not sure what you have tried but changing that one line does seem to fix it. Clicking on any of the buttons renders both trees correctly. Am I misunderstanding a problem here?

https://codesandbox.io/s/magical-shockley-vpqp8

I am not sure why it wouldn't work like you are suggesting, someone else might have a better answer. It's always tricky expecting reactivity from a library that's not designed that way. One small thing can elude you on the path and screws everything.

[simonssspirit]

@FredyC thank you, I guess something was not updated properly on my end.

Everything is working perfectly now.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.