Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/477.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript mobx存储中未定义数组长度_Javascript_Arrays_Reactjs_Mobx_Mobx React - Fatal编程技术网

Javascript mobx存储中未定义数组长度

Javascript mobx存储中未定义数组长度,javascript,arrays,reactjs,mobx,mobx-react,Javascript,Arrays,Reactjs,Mobx,Mobx React,我试图从Redux转换到Mobx,并尝试在Mobx存储中设置一个数组,我使用decorators来设置值。我可以从存储返回静态值,但是下面的数组长度总是抛出未定义的值。 不确定下面的代码有什么问题。有什么建议吗 import {observable, action, computed} from 'mobx'; class FormDataStore { @observable formdata = [1,2,3]; @action updateFormData = (fo

我试图从Redux转换到Mobx,并尝试在Mobx存储中设置一个数组,我使用decorators来设置值。我可以从存储返回静态值,但是下面的数组长度总是抛出未定义的值。 不确定下面的代码有什么问题。有什么建议吗

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
错误

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)
下面是我如何尝试读取数据

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;
从“React”导入React;
从“语义ui反应”导入{Container};
从“反应高光”导入高光;
从“mobx react”导入{inject,observer};
@注入('FormDataStore')
@观察者
类PreviewWindow扩展了React.Component{
render(){
const{FormDataStore}=this.props;
console.log(FormDataStore)
返回(
JSon预览
{FormDataStore.getFormData}
{FormDataStore.readdata}
);
}
}
导出默认预览窗口;

中插件的顺序很重要。babelrc
必须更改babel配置中插件的顺序才能解决问题

/// WRONG

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

// RIGHT

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

你能告诉我你是如何访问readdata的吗?@kemicofa我用readdata部分更新了这篇文章。谢谢