REACTJS tableBody.jsx 组件错误:对象作为 React 子对象无效 [英] REACTJS tableBody.jsx component error : Objects are not valid as a React child

问题描述

在创建 tableBody.jsx 组件后很难卡住，无论我做了多少更改都会出现相同的错误.

Hard stuck after creating tableBody.jsx component and getting same error no matter how much changes i make.

这是moviesTable.jsx组件

This is moviesTable.jsx component

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 组件

And this is tableBody.jsx component

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 函数给出的数据排列在这样的表格中......

this is the output i am getting by {console.log(this.renderCell(item, column))}. I want to arrange the data given by renderCell function in a table like this...

https://anonfiles.com/B8tdQ2G6pa/output_jpg

从 tableBody.jsx 组件返回时，我收到此错误:(错误:对象作为 React 子对象无效(找到:带有键 {_id, name} 的对象).如果您打算渲染子集合，请改用数组.)

while returning from tableBody.jsx component i'm getting this error : (Error: Objects are not valid as a React child (found: object with keys {_id, name}). If you meant to render a collection of children, use an array instead.)

推荐答案

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

You're returning a property from item in your renderCell function

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

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

Ensure its not an object that is getting returned, and is a primitive data type.

这篇关于REACTJS tableBody.jsx 组件错误:对象作为 React 子对象无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！