相关疑难解决方法(0)

我试图使用用户代理将json设置为一个状态,我得到错误:

Uncaught Invariant Violation:对象无效作为React子对象(找到:带有键{...}的对象).如果您要渲染子集合,请使用数组,或使用React附加组件中的createFragment(object)包装对象.

 getInitialState: function(){
    return {
        arrayFromJson: []
    }
},

loadAssessmentContacts: function() {
    var callback = function(data) {
        this.setState({arrayFromJson: data.schools})
    }.bind(this);

    service.getSchools(callback);
},

componentWillMount: function(){
    this.loadAssessmentContacts();
},

onTableUpdate: function(data){

    console.log(data);

},

render: function() {

    return (
        <span>{this.state.arrayFromJson}</span>
    );
}

getSchools : function (callback) {
        var url = 'file.json';
       request
            .get(url)
            .set('Accept', 'application/json')
            .end(function (err, res) {
                if (res && res.ok) {
                    var data = res.body;
                    callback(data);

                } else {
                    console.warn('Failed to load.');
                }
            });
    }

我刚开始使用React进行编码,我习惯用CoffeeScript编写代码.我尝试按照React文档中提供的教程进行编码,并为状态更新做了类似的操作.

但是,我得到了TypeError: this.props.data.map is not a function.

我有点失落,我想知道我错在哪里.有人可以指导我,告诉我哪里出错了吗？

这是我的代码:

(function() {
    var Status, StatusBox, StatusForm, StatusList, button, div, h4, textarea, _ref;

    _ref = React.DOM, div = _ref.div, textarea = _ref.textarea, button = _ref.button, h4 = _ref.h4;

    StatusBox = React.createClass({
        getInitialState: function() {
            return {
                data: []
            };
        },
        loadStatusFromServer: function() {
            return $.ajax({
                url: this.props.url,
                success: function(data) {
                    this.setState ({data : data})
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error("status.json", status, err.toString());
                }.bind(this)
            });
        }, …

我有一个本地JSON文件,用于将所有数据加载到app.在一个组件中,我加载了constructor()这些数据.在函数中addRow()我添加了新字段,但它只是在本地状态变量中.我想将它添加到json文件中,所以刷新后这个新行仍然会在这里.

我试着找到这个解决方法真的很容易,但我找不到它.如果您了解某个主题,请将其发送给我.

constructor() {
    super();
    this.state = {
        employees: require('json!../../../data/employees.json')
    };
    this.addEmployee = this.addEmployee.bind(this);
}

addEmployee(employee) {
    this.setState({
        employees: this.state.employees.concat([employee])
    });
}

我正在尝试根据其中包含值的数组有条件地呈现。所以基本上如果 this.props.data == [] 不渲染。如果 this.props.data == [{data is here}] 渲染。

我尝试过的事情。

如果道具存在

{this.props.data && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===仍然呈现===

空值

{this.props.data != null && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===仍然呈现===

长度

{this.props.data.length > 0 && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===长度未定义===