Im using mobx 5.15.7 seeing weird behavior

Question

Hello I am use to mobx 4 just getting to mobx 5 and I noticed that the syntax and someways you read observable variables have changed I am trying to log to the console.log the output of some data Im getting from a route, but I am seeing a Proxy and some other stuff. Screenshots are posted below and an explanation would be be greatly appreciated.

Here is what I have some far code wise.

    const { team } = this.props.teamStore;
    console.log(this.props.teamStore)
    const userTeams = !!team ? team : null;
    console.log(userTeams)
    return (
      
        Home page again lets get it.
        {this.getTeams()}
      
    );

Here is the weird output I was experincing

[[Handler]]: Object
[[Target]]: Array(3)
[[IsRevoked]]: false

user_5650447 · Answer

This is normal, MobX 5 uses Proxy under the the hood (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), and this is what it does to your observable data.

You can try to use toJS method on your data if you want regular console output, like that:

import { toJS } from 'mobx';

// ...

console.log(toJS(userTeams))

More here: https://www.mobxjs.com/refguide/tojson.html

Im using mobx 5.15.7 seeing weird behavior

1 Answers