web-dev-qa-db-fra.com

Promise Error: les objets ne sont pas valides en tant que React enfant

J'essaie de mettre le json dans un état en utilisant l'agent utilisateur, j'ai l'erreur:

Violation invariante non capturée: les objets ne sont pas valides en tant que React enfant (trouvé: objet avec des clés {...}). Si vous souhaitiez rendre une collection d'enfants, utilisez plutôt un tableau l'objet à l'aide de createFragment (objet) à partir des add-ons 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.');
                }
            });
    }

{
"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
},......
]}
reactjssuperagent
26
Bomber

Vous ne pouvez pas faire ceci: {this.state.arrayFromJson} Comme votre erreur le suggère, ce que vous essayez de faire n’est pas valide. Vous essayez de rendre le tableau entier sous la forme d'un enfant React. Ceci n'est pas valide. Vous devez parcourir le tableau et rendre chaque élément. J'utilise .map pour faire ça.

Je colle un lien à partir duquel vous pouvez apprendre à rendre des éléments d’un tableau avec React.

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

J'espère que ça aide!

17
Antonis Zisis

Vous ne pouvez pas simplement retourner un tableau d'objets car rien ne dit React comment rendre cela. Vous aurez besoin de retourner un tableau de composants ou d'éléments comme:

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