Javascript “必须返回有效的 React 元素（或 null）”错误，其中包含 ReactJS 中的组件之一

'A valid React element (or null) must be returned' error with one of the component in ReactJS

提问by Vikram Anand Bhushan

My code is something like this

我的代码是这样的

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

All I am trying to do is List the detail from the Jsondata into a table form . I will be adding an API to fetch that JSON in Future

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

but I am getting following error

但我收到以下错误

Error: TableforbasictaskList.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

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

Here is the JSFIDDLE

这是JSFIDDLE

Any help is appreciated

任何帮助表示赞赏

回答by Alexander T.

React component must have only one root node., as you are using TableforbasictaskListinside tableyou need wrap commentNodesin <tbody>., also inside Tableforbasictaskmove TableforbasictaskFormfrom table

React 组件必须只有一个根节点.，因为你在TableforbasictaskList里面使用table你需要包裹commentNodes在<tbody>.，也在里面Tableforbasictask移动TableforbasictaskFormfromtable

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

Example

回答by Yury Tarabanko

rendershould return single root element https://jsfiddle.net/69z2wepo/41120/

render应该返回单个根元素https://jsfiddle.net/69z2wepo/41120/

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

Update. More valid option using tbody as a wrapper

更新。使用 tbody 作为包装器的更有效选项

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

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

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