reactjs - REACTJS tableBody.jsx 组件错误:对象作为 React 子项无效
问题描述
创建 tableBody.jsx 组件后,无论我做了多少更改,都会遇到相同的错误。
这是 moviesTable.jsx 组件
import React, { Component } from "react";
import TableHeader from "./common/tableHeader";
import Like from "./common/like";
import TableBody from "./common/tableBody";
class MoviesTable extends Component {
columns = [
{ path: "title", label: "Title" },
{ path: "genre", label: "Genre" },
{ path: "numberInStock", label: "Stock" },
{ path: "dailyRentalRate", label: "Rate" },
{
key: "like",
content: (movie) => (
<Like liked={movie.liked} onClick={() => this.props.onLike(movie)} />
),
},
{
key: "delete",
content: (movie) => (
<button
onClick={() => this.props.onDelete(movie)}
className="btn btn-danger"
>
Delete
</button>
),
},
];
render() {
const { movies, onSort, sortColumn } = this.props;
return (
<>
<table className="table">
<TableHeader
columns={this.columns}
sortColumn={sortColumn}
onSort={onSort}
/>
<TableBody data={movies} columns={this.columns} />
</table>
</>
);
}
}
export default MoviesTable;
这是 tableBody.jsx 组件
import React, { Component } from "react";
import _ from "lodash";
class TableBody extends Component {
renderCell = (item, column) => {
if (column.content) return column.content(item);
return _.get(item, column.path);
};
createKey = (item, column) => {
return item._id + (column.path || column.key);
};
render() {
const { data, columns } = this.props;
return (
<tbody>
{data.map((item) => (
<tr key={item._id}>
{columns.map((column) => (
<td key={this.createKey(item, column)}>
{this.renderCell(item, column)}
</td>
))}
</tr>
))}
</tbody>
);
}
}
export default TableBody;
https://anonfiles.com/ber1QcGcpd/Screenshot_65_png
这是我通过 {console.log(this.renderCell(item, column))} 得到的输出。我想将renderCell函数给出的数据排列在这样的表中......
https://anonfiles.com/B8tdQ2G6pa/output_jpg
从 tableBody.jsx 组件返回时,我收到此错误:(错误:对象作为 React 子级无效(找到:带有键 {_id,name} 的对象)。如果您打算渲染一组子级,请使用数组代替。)
解决方案
您正在从renderCell
函数中的项目返回一个属性
renderCell = (item, column) => {
if (column.content) return column.content(item);
// Did you mean to use this in a react component??
return _.get(item, column.path);
};
确保它不是要返回的对象,并且是原始数据类型。
推荐阅读
- angular - 错误类型错误:无法读取未定义的属性“getMonth”
- jquery - LayerSlider 启动触发器
- jquery - 每个 item.hover() 的不同背景颜色动画
- php - 当我上传文件时,Laravel 没有获取文件
- swift - 如何使用 Swift 实时显示命令的输出?
- ubuntu - 已安装 SSL 证书,但 HTTPS 无法正常工作
- python - 使用 python 类变量作为 dict 键是好习惯吗?
- python - 为什么 TextBox 没有属性“插入”?
- batch-file - 如何从视频中检索宽度和高度
- r - Shiny中的所有服务器功能都可以看到反应数据吗?