使用 lodash 渲染嵌套属性与表格

Question

我正在尝试将我的表头和表体显示为单独的组件，并且动态显示，具有一些嵌套属性（如流派）。我使用 lodash，但 tBody 渲染出现错误。我不介意另一种方式来实现我的目标

下表体的数据

  export const data= [
    {
        _id: "5b21ca3eeb7f6fbccd471815",
        title: "Terminator",
        genre: [{_id: "5b21ca3eeb7f6fbccd471818", name: "Action"}],
        numberInStock: 6,
        dailyRentalRate: 2.5,
        publishDate: "2018-01-03T19:04:28.809z"
        
    },
    {
        _id: "5b21ca3eeb7f6fbccd471819",
        title: "Trip to Italy",
        genre: [{_id: "5b21ca3eeb7f6fbccd471814", name: "Comedy"}],
        numberInStock: 7,
        dailyRentalRate: 3.5,
        publishDate: "2018-01-03T19:04:28.809z"
    },
    
    {
        _id: "5b21ca3eeb7f6fbccd47181b",
        title: "Wedding Crashers",
        genre: [{_id: "5b21ca3eeb7f6fbccd471814", name: "Comedy"}],
        numberInStock: 7,
        dailyRentalRate: 3.5,
        publishDate: "2018-01-03T19:04:28.809z"
    }]

这里是我的父组件的 columns prop，以减少添加太多代码

  columns = [
        {path: "title", label: "Title"},
        {path: "genre", label: "Genre"},
        {path: "numberInStock", label: "Stock"},
        {path: "dailyRentalRate", label: "Rate"},
        {
            key: "like",
            content: movie => { <Liked liked={movie.liked} onClick={() => this.props.onLike(movie)} /> }
        },
        {
            key: "delete",
            content: movie =>
            {
                <button
                    onClick={() => this.props.onDelete(movie)}
                    className="btn btn-danger btn-sm">Delete
                </button>
            }
        }
    ]
     

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)
    }
    
    
    render() { 
        
        const {data, columns } = this.props

        return ( 
            <>
            <tbody>
                {data.map(item => 
                        <tr key={item._id}>
                        {columns.map(column =>
                                
                            <td key={item._id + (
                                    column.path || column.key)}>
                                    
                                    {this.renderCell(item, column)}
                                
                                </td>)}
                                    
                                    </tr>)
                                    }
                            </tbody>
            </>
         );
    }
}
 
export default TableBody;

我在尝试我的代码时遇到此错误

未捕获的错误：对象作为 React 子项无效（已找到：具有键 {_id, name} 的对象）。如果你打算渲染一个孩子的集合，请改用数组。

Answer 1

问题是你数据中的

genre

是一个对象，导致了这个错误。

如果你这样做，它会解决问题

 renderCell = (item, column) => {
    if (column.content) return column.content(item);

    if(column.path === 'genre') {
      return item.genre[0].name
    }
    return _.get(item, column.path);
  };