react-table迭代对象数组以打印列中的值

Question

我正在使用react-table生成表（https://react-table.js.org/#/story/readme）。我的状态定义如下：

primary_skills: {type: Types.Relationship, ref: 'Skill', many: true},
secondary_skills: {type: Types.Relationship, ref: 'Skill', many: true},

我正在努力制作如下表格：

this.state = {

    sampleTable:[
        {author: 'Mac', books: [{title:'One', price: 20}, {title:'Two', price: 20}]},
        {author: 'Rick', books: [{title:'Three', price: 20}, {title:'Four', price: 20}]}
    ],

    sampleTableColumns:[
        {Header: 'Author', accessor: 'author'},
        {Header: 'Books', accessor: 'books.title'},
    ],
};

然而，在书籍专栏中我什么都没看到。我不知道我应该如何迭代书籍数组，以便我可以在书籍专栏中打印出书名？

Answer 1

我必须写下我的访问者：

sampleTableColumns:[
    {
        Header: 'Author',
        accessor: 'author',

    },
    {
        Header: 'Books',
        id:'books',
        accessor: data => {
            let output = [];
            _.map(data.books, book => {
                output.push(book.title);
            });
            return output.join(', ');
        },
    },
],

Answer 2

您的Product数据是一个数组，我不相信books知道默认情况下如何呈现这些数据。您可以在该单元格的sampleTableColumns中提供自己的渲染函数，如下所示：

react-table

Answer 3

很简单没有使用任何依赖项，例如 lodash...

你只需要使用 React-table Cell 属性

sampleTableColumns:[
{
    Header: 'Author',
    accessor: 'author',
},
{
    Header: 'Books',
    accessor: 'books',
    Cell: (props) => {
        const { sampleTable} = props.original;
        return (
            { sampleTable.books.map( (book) =>(<h4>{book.title}</h4>)) }
        );
    },
},],

Answer 4

好吧，我参加派对已经太晚了，但以上所有内容对我都不起作用，我尝试使用 ES6 语法。我已经请求了数组中的数据，所以我们开始（我重命名了变量）：

  export const returnPreparedField = (array) => {
    const newArray = [];

    for (let arrayValue of array) {

        const newElement = {
            id: "element",
            header: element,
            accessor: data => data.element.find(elementToFind => (elementToFind.name === element))?.value,
            show: true,
            width: 100
        };

        newArray.push(newElement);
    }
    return newArray;
};