在表的tbody中的ReactJS嵌套循环

Question

我在嵌套循环中遇到困难。 我的数据就是这样。 您可以在表格中间的注释中看到，我试图再次循环“ detail_info”，但我无法成功。 请检查代码下方的图片示例输出。

我无法在第二个循环中进行第三个循环。 错误提示： JSX表达式必须具有一个父元素。

const data = 
  [{
     'product': {'value': 'Cotton'},
     'detail': [{'document_no': 'DO234','quantity': '55',
              'detail_info':[{'id': '1','expiry_date': '2018/10/12'},
                            {'id': '2','expiry_date': '2019/9/9'}]
              }]
  }]
     <table className='scroll-table'>
                <thead style={{'display':'table','width':'100%'}}> 
                    <tr> 
                        <th style={{'width':'20%'}}>Product</th>
                        <th style={{'width':'8%'}}>Doc. No</th>
                        <th style={{'width':'8%'}}>Quantity</th>
                    </tr>
                </thead>
                {data.map((item,idx)=>{
                    return(
                    <tbody key={idx} className="scrollbar">
                       <tr>
                        <td style={{'width':'2%'}}><input name="product" type="text" /></td>
                       </tr>
                     {item.detail.map((i,index)=>{
                         return(
                             <tr key={index} >
                                 <td colSpan="2"></td>
                                 <td>{i.document_no}</td>
                                 <td >{i.quantity}</td>
                             </tr>
                         /*  I want to loop here to make another <tr> but I 
                           cant because **JSX expressions must have one parent element. 

                            {i.detail_info.map((a,b)=>{
                            return( 
                             <tr key={b}><td>{a.expiryDate}</td></tr>
                             )})
                         */
                         )
                     })
                </tbody>
                    )
                })}
            </table>

它应该看起来像这样。

Answer 1

当您返回JSX表达式时，可能只有一个父元素。 假设您正在使用React v16，可以通过将<tr/>包裹在一个片段中来完成任务：

{item.detail.map((i, index) => (
    <Fragment>
        <tr key={index}>
            <td colSpan="2"></td>
            <td>{i.document_no}</td>
            <td>{i.quantity}</td>
        </tr>
        {i.detail_info.map((a, b) => <tr key={b}>
            <td>{a.expiryDate}</td>
        </tr>)
        }
    </Fragment>
))

通过用<Fragment/>包裹<tr/> ，您的JSX表达式将具有一个父元素。 请参阅React Fragments 。