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

Question

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

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'},
    ],
};

我正在尝试制作如下表格:

<ReactTable
    className="-highlight"
    data={this.state.sampleTable}
    columns={this.state.sampleTableColumns}
    defaultPageSize={10}
/>

但是在书籍栏中我什么也没看到。我不确定如何迭代书籍数组，以便可以在书籍列中打印书籍标题？

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(', ');
        },
    },
],