对象在React Datatable中作为React子错误无效

Question

好的，所以当我试图从我的web api返回一些数据时，我得到这个错误。我尝试了所有其他类似的帖子建议，但不能得到这个工作。谢谢你的帮助。

对象作为React子对象无效。如果您打算呈现子元素的集合，请使用数组。

clg(records)返回:

[{
id:1,
Listing: {id: 2, title: 'Testtt'},
ListingId: 2
},
{
id:2,
Listing: {id: 3, title: 'hell world'},
ListingId: 3
}]

下面是我的reactjs代码:

class Products extends Component {
constructor(props) {
super(props);
this.columns = [
{
key: "id",
text: "Id",
className: "id",
align: "left",
sortable: true,
},
{
id:"ListingId"
text: "Merchant ID",
className: "name",
align: "left",
sortable: true,
},

}
];

this.state = {
records: []
};
this.getData = this.getData.bind(this);
}
componentDidMount() {
this.getData()
};
componentWillReceiveProps(nextProps) {
this.getData()
}
getData() {
axios
.get("/api/products")
.then(res => {
this.setState({ records: res.data})
})
.catch()
}

render() {
const {records}=this.state;
console.log(records);

return (
<div>
<ReactDatatable
records={this.state.records}
columns={this.columns}
loading='true'
/>
</div>
);
}}

当前它在列中显示ListingId，我怎么才能显示清单标题呢?

我正在使用这个包:

https://www.npmjs.com/package/@ashvin27 react-datatable

Answer 1

我的问题是这样的

{                                
key:'ListingId',
text: "Column Title",
className: "name",
align: "left",
sortable: true,
cell: record => {
console.log(record)
return (
<span>{record.Listing.title}</span>)
}
},