Promise ошибки: объекты не действуют как Реагировать ребенок

Question

Я пытаюсь установить 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 
},...... 
]} 

Answer 1

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

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

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

Надеется, что это помогает!

Answer 2

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

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