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

【问题标题】：REACTJS tableBody.jsx component error : Objects are not valid as a React childREACTJS tableBody.jsx 组件错误：对象作为 React 子项无效
【发布时间】：2021-05-12 08:15:08
【问题描述】：

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

【问题讨论】：

this.renderCell(item, column) 除非该方法返回一个 React 节点，否则它几乎肯定是罪魁祸首。
@JaredSmith <td key={this.createKey(item, column)}>{_.get(item, column.path);}</td> 给出同样的错误，即使我删除了 renderCell 函数
这...不是函数的工作方式。当我说“您的问题是该方法返回的内容”时，这就是那个意思。获取返回值并直接代替函数调用是完全相同的事情，所以你当然会得到同样的错误......你必须将其更改为 React可以渲染。
如何解决这个问题？
不知道，您需要显示_.get(item, column.path) 返回的内容，并告诉我们您期望在那里看到什么。

标签： reactjs react-native react-component

【解决方案1】：

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

【讨论】：

【解决方案2】：

您正在从 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);
};

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

【讨论】：

不，renderCell函数不是问题， {_.get(item, column.path);} this给出同样的错误
@DrDOMinance Kumar 是正确的，不管你是把它包装在一个方法中还是直接放置它，不管它是一个对象而不是一个有效的 React 子节点。