[英]Can't render table rows in functional components, objects are not valid as a react child
Uncaught Error: Objects are not valid as a React child未捕获的错误:对象作为 React 子项无效
Here is my RowComponent:这是我的行组件:
function IssueRow(props) {
const issue = props.issue;
return (
<tr>
<td>{issue.id}</td>
<td>{issue.status}</td>
<td>{issue.owner}</td>
<td>{issue.created}</td>
<td>{issue.effort}</td>
<td>{issue.due}</td>
<td>{issue.title}</td>
</tr>
)
};
Here is my Table Component:这是我的表组件:
function IssueTable(props) {
const issueRows = props.issues.map(issue => (
<IssueRow key={issue.id} issue={issue} />
))
return (
<table className="bordered-table">
<thead>
<tr>
<td>ID</td>
<td>Status</td>
<td>Owner</td>
<td>Created</td>
<td>Effort</td>
<td>Due Date</td>
<td>Title</td>
</tr>
</thead>
<tbody>
{issueRows}
</tbody>
</table>
)
};
My Table Component is being rendered from a TableList Component with these properties:我的表组件是从具有以下属性的 TableList 组件呈现的:
this.state = {
issues: [
{ id: 1, status: 'New', owner: 'Ravan', effort: 5, created: new Date('2018-08-15'), due: undefined, title: 'Error in console when clicking Add' },
{ id: 2, status: 'Assigned', owner: 'Eddie', effort: 14, created: new Date('2018-08-16'), due: new Date('2018-08-30'), title: 'Missing bottom border on panel' }
]
}
.
.
.
render() {
return (
<React.Fragment>
<h1>Issue Tracker</h1>
<IssueFilter />
<hr />
<IssueTable issues={this.state.issues} />
<hr />
<IssueAdd createIssue={this.createIssue} />
</React.Fragment>
)
}
I can not figure out, why i am getting that error message.我无法弄清楚,为什么我会收到该错误消息。 Is it maybe because of some compilation errors?
可能是因为一些编译错误? I am not using npx create-react-app, and set the environment up myself.
我没有使用 npx create-react-app,而是自己设置环境。
issue.created
and issue.due
are Date objects. issue.created
和issue.due
是 Date 对象。 You can't use them directly as React elements, you have to convert them to string first, for example by using .toString()
method.您不能直接将它们用作 React 元素,您必须先将它们转换为字符串,例如使用
.toString()
方法。
function IssueRow(props) {
const issue = props.issue;
return (
<tr>
<td>{issue.id}</td>
<td>{issue.status}</td>
<td>{issue.owner}</td>
<td>{issue.created.toString()}</td>
<td>{issue.effort}</td>
<td>{issue.due && issue.due.toString()}</td>
<td>{issue.title}</td>
</tr>
)
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.