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遍歷對象數組以在列中打印值

回答

相關問題