未捕获的错误：使用 react-bootstrap-table-next 时，对象作为 React 子项无效答案

【问题标题】：Uncaught Error: Objects are not valid as a React child while using react-bootstrap-table-next未捕获的错误：使用 react-bootstrap-table-next 时，对象作为 React 子项无效
【发布时间】：2021-08-08 14:06:10
【问题描述】：

我有一个React 组件，我正在尝试使用react-bootstrap-table-next 库来呈现一个表格。问题Uncaught Error: Objects are not valid as a React child。

问题：我传递的array 有一个属性，它本身就是object。其中<BootstrapTable 只能将string 作为属性。如果查看console.log(todos) 的屏幕截图，它显示dueDate 属性是一个对象，而不是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 组件内没有呈现任何内容。

【问题讨论】：

标签： javascript reactjs react-bootstrap-table react-bootstrap-table-next react-bootstrap-table2

【解决方案1】：

<BootstrapTable> 的问题在于它不会将object 作为其property value 之一。必须是string:

在我的组件中，onFormSubmit 方法的日期为 new Date()。但这只是Dateobject。所以需要用JSONSerializer解析。

解决方案

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

Source:

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)

【讨论】：