Uncaught Error: Objects are not valid as a React child while using react-bootstrap-table-next

Question

我有一个 React 组件，我正在尝试使用 react-bootstrap-table-next 库呈现 table。我收到一个错误：

Uncaught Error: Objects are not valid as a React child

问题： 我传递的 array 有一个属性，它本身就是一个对象。其中<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 组件内没有渲染。

Answer 1

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

在我的组件中，onFormSubmit 方法的日期为 new Date()。但那只是一个Dateobject。所以它需要用 JSON Serializer.

解析

解决方案

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)

Uncaught Error: Objects are not valid as a React child while using react-bootstrap-table-next

Uncaught Error: Objects are not valid as a React child while using react-bootstrap-table-next

javascript

reactjs

react-bootstrap

react-bootstrap-table