Obietnica błędach: Obiekty nie są ważne jako React dziecko

Question

Próbuję ustawić json do stanu za pomocą agenta użytkownika, pojawia się błąd:

Uncaught Inwariant wykroczenie: Obiekty nie są ważne jako dziecko React (znaleziono: obiekt z kluczami {...}). Jeśli chcesz renderować kolekcję potomków, użyj zamiast niej tablicy lub zawiń obiekt za pomocą createFragment (object) z dodatków React.

sposób ustawić STAN:

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

usługę

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

nie można zrobić: {this.state.arrayFromJson} Jako twój błąd sugeruje, co próbujesz nie jest prawidłowe. Próbujesz renderować całą tablicę jako dziecko React. To nie jest poprawne. Powinieneś iterować przez tablicę i renderować każdy element. Używam do tego celu .map.

Wklejam link, z którego można dowiedzieć się, jak renderować elementy z tablicy za pomocą polecenia React.

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

Nadzieję, że to pomaga!

Answer 2

Nie można po prostu zwrócić tablicy obiektów, ponieważ nic nie mówi React, jak to renderować. Będziesz musiał zwrócić tablicę komponentów lub elementów, takich jak:

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