Question 'Un élément React valide (ou null) doit être renvoyé' erreur avec l'un des composants de ReactJS


Mon code est quelque chose comme ça

var data = [
    {id: 1, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 2, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 3, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 4, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 5, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"}
];

var Tableforbasictask = React.createClass({
  render: function() {
    return (
     <div className="downloadlinks">
      <table className="table table-bordered table-striped-col nomargin" id="table-data">
      <tbody>
        <tr align="center">
            <td>Task  Name</td>
            <td>Standard Discription of Task</td>
            <td>Employee Comment</td>
            <td>Employee rating</td>
        </tr>
        <TableforbasictaskList data={this.props.data} />
        <TableforbasictaskForm />
        </tbody>
      </table>
      </div>
    );
  }
});

var TableforbasictaskForm = React.createClass({
    render: function() {
      return (
        <div className="commentForm">
          Hello, world! I am a CommentForm.
        </div>
      );
    }
  });

var Addcontenttotable = React.createClass({
render: function() {
  return (
    <tr><td>{this.props.taskName}</td>
        <td>{this.props.standarDescription}</td>
        <td>{this.props.emplComment}</td>
        <td>{this.props.empRating}</td>
    </tr>
  );
}
});

var TableforbasictaskList = React.createClass({
render: function() {
  var commentNodes = this.props.data.map(function(comment) {
    return (
      <Addcontenttotable taskName={comment.taskName} standarDescription={comment.standarDescription} emplComment={comment.emplComment} empRating={comment.empRating} key={comment.id}>
      </Addcontenttotable>
    );
  });
  return (
      {commentNodes}
  );
}
});
ReactDOM.render(<div><Tableforbasictask data={data}  /></div>, document.getElementById('content'));

Tout ce que j'essaie de faire, c'est de lister les détails du Json données dans un tableau. Je vais ajouter une API pour récupérer ce JSON dans l'avenir

mais j'obtiens l'erreur suivante

Erreur: TableforbasictaskList.render (): un élément React valide (ou null) doit être renvoyé. Vous avez peut-être retourné undefined, un tableau ou un autre objet non valide.

Voici la JSFIDDLE

Toute aide est appréciée


18
2018-05-06 13:07


origine


Réponses:


Composant de réaction doit avoir un seul noeud racine., comme vous utilisez TableforbasictaskList à l'intérieur table tu as besoin de wrap commentNodes dans <tbody>., aussi à l'intérieur Tableforbasictask bouge toi TableforbasictaskForm de table

var TableforbasictaskList = React.createClass({
  render: function() {
    // .....
    return (<tbody>{commentNodes}</tbody>);
  }
});

var Tableforbasictask = React.createClass({
  render: function() {
    return <div className="downloadlinks">
      <table
        className="table table-bordered table-striped-col nomargin"
        id="table-data"
      >
        <thead>
          <tr align="center">
            <td>Task  Name</td>
            <td>Standard Discription of Task</td>
            <td>Employee Comment</td>
            <td>Employee rating</td>
          </tr>
        </thead>
        <TableforbasictaskList data={this.props.data} /> 
      </table>
      <TableforbasictaskForm />
    </div>
  }
});

Example


22
2018-05-06 13:18



render devrait retourner un élément racine unique https://jsfiddle.net/69z2wepo/41120/

return (<div>
    {commentNodes}
</div>);

Mettre à jour. Option plus valide utilisant tbody comme wrapper

return (<tbody>
    {commentNodes}
</tbody>);

https://jsfiddle.net/69z2wepo/41125/


14
2018-05-06 13:11