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

Answer 2

您的books数据是一个数组，我不相信react-table默认情况下知道如何渲染它们。您可以在该单元格的 SampleTableColumns 中提供您自己的渲染函数，如下所示：

sampleTableColumns:[
    {Header: 'Author', accessor: 'author'},
    {
      Header: 'Books', 
      accessor: 'books'
      render: (rowInfo) => {
        return (
          <span>
           {rowInfo.value.map(book => (<span>{book.title}</span>))}
          </span>
      },
    },
],