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

superagent yarn

Question

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

Answer 1

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!

Answer 2

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