Array length undefined in mobx store

Question

I am trying to shift from Redux to Mobx and tried setting up an array in the mobx store, i use decorators to set the value. I am able to return static value from the store but the array length below always throws and undefined value. Not sure what is wrong with the below code. Any suggestions ?

import {observable, action, computed} from 'mobx';

class FormDataStore {

    @observable formdata = [1,2,3];

    @action updateFormData = (formdata) => {
        this.formdata.push(formdata);
    }

    @computed get readdata() {
        return this.formdata.length;
    }

}

const store = new FormDataStore();
export default store

Error

FormDataStore.js:12 Uncaught TypeError: Cannot read property 'length' of undefined
    at FormDataStore.get (FormDataStore.js:12)
    at trackDerivedFunction$$1 (mobx.module.js:1142)
    at ComputedValue$$1.computeValue (mobx.module.js:934)
    at ComputedValue$$1.trackAndCompute (mobx.module.js:919)
    at ComputedValue$$1.get (mobx.module.js:879)
    at ObservableObjectAdministration$$1.read (mobx.module.js:3822)
    at FormDataStore.get (mobx.module.js:4086)
    at FormDataStore.get (mobx.module.js:295)
    at PreviewWindow.render (PreviewWindow.js:24)
    at Object.allowStateChanges$$1 (mobx.module.js:653)

Below is how i try to read data

import React from "react";
import { Container } from "semantic-ui-react";
import Highlight from "react-highlight";
import {inject,observer} from 'mobx-react';

@inject('FormDataStore')


@observer
class PreviewWindow extends React.Component {



  render() {


    const {FormDataStore} = this.props;
    console.log(FormDataStore)

    return (
      <Container>
        <h1>JSon Preview</h1>
      <h1>{FormDataStore.getFormData}</h1>
          <Highlight language="javascript">{FormDataStore.readdata}</Highlight>

      </Container>
    );
  }
}

export default PreviewWindow;

Can you show how you're accessing `readdata` ? – kemicofa ghost Feb 18 '19 at 23:59 — kemicofa ghost, Feb 18 '19 at 23:59
@kemicofa I update the post with the readdata part. Thanks – Sudheej Feb 19 '19 at 15:28 — Sudheej, Feb 19 '19 at 15:28

score 0 · Answer 1 · answered Feb 19 '19 at 15:55

The order of the plugin in .babelrc matters, had to change the order of the plugin in babel config to fix the issue.

/// WRONG

"plugins": [
  "transform-class-properties",
  "transform-decorators-legacy"
]

// RIGHT

"plugins": [
  "transform-decorators-legacy",
  "transform-class-properties"
]

Array length undefined in mobx store

1 Answers1