Question

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

2021-08-08

250

javascript reactjs react-bootstrap react-bootstrap-table

我有一个 React 组件，我正尝试使用 react-bootstrap-table-next 库来渲染表格。我收到错误：

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>
    );

当我尝试输入一些数据时，todos 是 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)