我的代码是这样的

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

我要做的就是将Json数据中的详细信息列出到表格中。我将添加一个API，以在将来获取该JSON

但我收到以下错误

错误：TableforbasictaskList.render（）：必须返回有效的React元素（或null）。您可能返回了undefined，数组或其他无效对象。

这是 JSFIDDLE

任何帮助表示赞赏