未捕获的错误：使用 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)