Question

在创建 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} 的对象）。如果您打算渲染子集合，请改用数组。）

Answer 1

您正在从 renderCell 函数中的 item 返回一个属性

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

确保它不是返回的对象，并且是原始数据类型。

Answer 2

列中类型的路径不正确。请将列中的 { path: "genre", label: "Genre" } 更改为 { path: "genre.name", label: "Genre" }。由于路径不正确，_.get() 返回一个带有 id 和 name 而不是 name-value 的流派对象。因此出现错误。

REACTJS tableBody.jsx 组件错误：对象作为 React 子对象无效

2 个答案: