react-table遍历对象数组以在列中打印值

我正在使用react-table生成表（https://react-table.js.org/#/story/readme）。我定义如下状态：react-table遍历对象数组以在列中打印值

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} 
/>

然而，在书专栏中，我什么也看不见。我不知道我应该如何迭代书籍数组，以便我可以在书籍专栏中打印图书标题？

来源

2017-07-31 Nitish

您的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> 
     }, 
    }, 
],

来源

2017-07-31 18:48:32

嘿斯蒂芬，感谢您的回答。但它没有打印任何东西.. :(同样的问题，我只需要在该列中打印，该作者的所有书名 – Nitish

请尝试我的代码并编辑您的书籍列对象存取器以读取'书籍'而不是'books.title ' –

我尝试了你的代码，如果我将访问器从books.title更改为书籍，那么它会给我一个错误：对象作为一个React孩子无效（找到：带有键{title，price}的对象）。渲染一个孩子的集合，使用数组来代替， – Nitish

我不得不写我的访问像以下：

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

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

来源

2017-08-07 08:50:32 Nitish

react-table遍历对象数组以在列中打印值

回答

相关问题