Mobx: Observable arrays of classes and React Dev Tools

[dylanparry]

Hi,

I've been trying to get get an array of class objects to work and have been coming across errors in React Dev Tools. What I have so far is this test case:

import { observable } from 'mobx';
import { inject, observer, Provider } from 'mobx-react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

class TestItem {
    public id: number;
    public name: string;

    public constructor(id: number, name: string) {
        this.id = id;
    }
}

class TestStore {
    @observable
    public testItems: TestItem[] = [];

    public addItem() {
        this.testItems.push(new TestItem(Math.random()));
    }
}

@inject('store')
@observer
class App extends React.Component<{ store?: TestStore }, {}> {
    public render(): JSX.Element {
        return (
            <div>
                <p>Items in store: {this.props.store!.testItems.length}</p>
                <button onClick={() => this.props.store!.addItem()}>Click Me</button>
            </div>
        );
    }
};

const store = new TestStore();
ReactDOM.render(<Provider store={store}><App /></Provider>, document.querySelector('#app'));

This renders a simple counter with a button to click to add a new TestItem to the observable array in my TestStore. When I click the button in the browser, the counter increases. If I open up React Dev Tools and click on the Provider component, then type $r.props.store.testItem.slice(0) I get the array back:

So it's definitely updating it, and the observer is working as the counter increases just fine. The problem I'm having is that if I click on the Provider in React Dev Tools, then click on the store prop and then try to expand testItems I get an error in the console and the testItems won't expand:

Is this something I am doing incorrectly, or is it a bug? If it's my fault, what is it that I'm doing wrong?

Thanks in advance.

[mweststrate]

I have seen this lately as well. So far seems to be chrome specific. Will investigate further! If you want to log it in your console, simply calling .slice()/ toString() / toJS() first will print it properly

[andykog]

See https://github.com/mobxjs/mobx/issues/410

On Oct 14, 2016, at 21:15, Michel Weststrate [email protected] wrote:

I have seen this lately as well. So far seems to be chrome specific. Will investigate further! If you want to log it in your console, simply calling .slice()/ toString() / toJS() first will print it properly

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[dylanparry]

Thanks. So, just to confirm, I'm not doing anything wrong with my code and the approach I've taken is correct? I'd usually rely on the React Dev Tools to make sure I'm doing things right, so when they're not working I feel like I'm a bit in the dark :)

[andykog]

@dylanparry, yep, it's known problem with react-devtools data (de)serializing. You can convert your ObservableArrays to plain Array before passing it as a props (currently you can call myObservableArray.slice() which is idiomatic way, but I would prefer Array.from(myObservableArray) or Array.prototype.slice.call(myObservableArray), see #552)