0

我有一个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内容。

4

1 回答 1

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)
于 2021-08-08T15:58:32.497 回答