react cannot reactjs superagent

reactjs - cannot - Error de promesa: los objetos no son válidos como hijo React



superagent yarn (2)

Estoy tratando de establecer el json a un estado usando el agente de usuario, me aparece el error:

Violación invariante no detectada: los objetos no son válidos como hijo secundario (encontrado: objeto con claves {...}). Si pretendía representar una colección de elementos secundarios, use una matriz o envuelva el objeto utilizando createFragment (objeto) de los complementos de React.

método para establecer el estado:

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

Servicio

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 },...... ]}


No puede hacer esto: {this.state.arrayFromJson} Como su error sugiere que lo que está tratando de hacer no es válido. Estás intentando renderizar toda la matriz como un hijo React. Esto no es válido. Debes iterar a través de la matriz y renderizar cada elemento. Yo uso .map para hacer eso.

Estoy pegando un enlace desde donde puedes aprender a renderizar elementos de una matriz con React.

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

¡Espero eso ayude!


No puedes devolver un conjunto de objetos porque no hay nada que le diga a React cómo hacerlo. Tendrá que devolver una serie de componentes o elementos como:

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