无法在功能组件中呈现表格行，对象作为反应子无效

Question

未捕获的错误：对象作为 React 子项无效

这是我的行组件：

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

这是我的表组件：

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

我的表组件是从具有以下属性的 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>
    )
    }

我无法弄清楚，为什么我会收到该错误消息。 可能是因为一些编译错误？ 我没有使用 npx create-react-app，而是自己设置环境。

Answer 1

issue.created和issue.due是 Date 对象。 您不能直接将它们用作 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>
    )
};