Ошибка обещания: объекты недопустимы как дочерний элемент React

Question

Ошибка обещания: объекты недопустимы как дочерний элемент React

10

Я пытаюсь установить json в состояние с помощью агента пользователя, я получаю ошибку:

Неактивное инвариантное нарушение: объекты недействительны в качестве дочернего элемента React (найдены: объект с ключами {...}). Если вы хотите отобразить коллекцию детей, используйте массив или оберните объект с помощью createFragment (object) из надстроек React.

для установки состояния:

 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.');
                }
            });
    }

Json

{
"schools": [
{
  "id": 4281,
  "name": "t",
  "dfe": "t",
  "la": 227,
  "telephone": "t",
  "address": "t",
  "address2": "t",
  "address3": "t",
  "postCode": "t",
  "county": "t",
  "ofsted": "t",
  "students": 2,
  "activeStudents": 2,
  "inActiveStudents": 0,
  "lastUpdatedInDays": 0,
  "deInstalled": false,
  "inLa": false,
  "status": "unnassigned",
  "authCode": "t",
  "studentsActivity": 0
},......
]}

Bomber 23 июнь 2016, в 19:51

Источник

Теги:

reactjs

superagent

2 ответа

4

Вы не можете просто вернуть массив объектов, потому что ничего не говорит React, как это сделать. Вам нужно будет вернуть массив компонентов или элементов, например:

render: function() {
  return (
    <span>
      // This will go through all the elements in arrayFromJson and
      // render each one as a <SomeComponent /> with data from the object
      {this.state.arrayFromJson.map(function(object) {
        return (
          <SomeComponent key={object.id} data={object} />
        );
      })}
    </span>
  );
}

jaybee 24 июнь 2016, в 01:27

Ещё вопросы

Antonis Zisis · Accepted Answer · 2016-06-23T18-14-00.000Z

Вы не можете сделать это: {this.state.arrayFromJson} Поскольку ваша ошибка указывает на то, что вы пытаетесь сделать, недействительна. Вы пытаетесь отобразить весь массив как дочерний элемент React. Это неверно. Вы должны проходить через массив и отображать каждый элемент. Я использую .map для этого.

Я вставляю ссылку, откуда вы можете узнать, как визуализировать элементы из массива с помощью React.

http://jasonjl.me/blog/2015/04/18/rendering-list-of-elements-in-react-with-jsx/

Надеюсь, что это поможет!