無法在功能組件中呈現表格行，對象作為反應子無效

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