未捕獲的錯誤：使用 react-bootstrap-table-next 時，對象作為 React 子項無效

Question

我有一個 React 組件，我正在嘗試使用 react-bootstrap-table-next 庫呈現一個表。 我收到一個錯誤：

未捕獲的錯誤：對象作為 React 子項無效

問題：我傳遞的array本身有一個屬性 object。 其中<BootstrapTable>只能將string作為屬性。 如果您查看console.log(todos)的屏幕截圖，它會顯示dueDate屬性是 object 而不是string 。

試過：

const columns = [
    { dataField: 'title', text: 'Title'},
    { dataField: 'description', text: 'Description' },
    { dataField: 'dueDate', text: 'Due Date' }
  ];

return (
        <div>
           <BootstrapTable 
            keyField= 'id'
            data={todos}
            columns={columns}
           />
        </div>
    );

當我嘗試輸入一些數據時，待辦事項是console.log ，如下所示：

問題： BootstrapTable組件內沒有呈現任何內容。

Answer 1

<BootstrapTable>的問題在於它沒有將object作為其property value之一。 它必須是string ：

在我的組件中， onFormSubmit方法的日期為new Date() 。 但這只是一個Date object 。 所以它需要用JSON Serializer解析。

解決方案

dueDate: JSON.parse(JSON.stringify(dueDate))

資料來源：

 var date = new Date(); console.log(date); // Wed Jan 01 2014 13:28:56 GMT-1000 (Hawaiian Standard Time) var json = JSON.stringify(date); console.log(json); // "2014-01-01T23:28:56.782Z"

...

 // JSON encoded date var json = "\"2014-01-01T23:28:56.782Z\""; var dateStr = JSON.parse(json); console.log(dateStr); // 2014-01-01T23:28:56.782Z var date = new Date(dateStr); console.log(date); // Wed Jan 01 2014 13:28:56 GMT-1000 (Hawaiian Standard Time)