從地圖返回多個​​，但沒有將它們封裝在一個封閉的標記中

Question

我有點卡在這種情況。 我知道要解決這種錯誤，我們必須將它們包裝在容器內或其他東西。但在這種情況下，我不能。請讓我知道是否有任何解決方案。

<div className="table-responsive col-lg-12"> 
    <table className="table table-bordered table-hover"> 
    <thead> 
     <tr className="active"> 
     <th className="width10">Name</th> 
     <th className="width10">Number</th> 
     <th className="width12">Email</th> 
     <th className="width10">User Handle</th> 
     <th className="width12">Address</th> 
     <th className="width10">Device IMEI</th> 
     <th className="width10">Mapped Date</th> 
     </tr> 
    </thead> 
    { this.state.userDetails.map((user,i)=>{ 
     return(
      <tbody key={i}> 
      <tr> 
       <td>{user.fn ? user.fn : "-"}</td> 
       <td>{user.mob ? user.mob : "-"}</td> 
       <td>{user.eml ? user.eml : "NA"}</td> 
       <td>{user.uh ? user.uh : "-"}</td> 
       <td>{user.add ? user.add : "-"}</td> 
      {this.state.deviceDetails.map((dev,i)=>{ 
       if(user.idx == dev.uid){ 
       return(
        <td>{dev.imei ? dev.imei : "-"}</td> 
        <td>{dev.dm ? dev.dm : "-"}</td> 
       ) 
       } 
      })} 
      </tr> 
      </tbody> 
     ) 
     }) 
    } 
    </table> 
</div> 

以上是我想要呈現的表格。 有兩個數組需要顯示我的表格內容。 所以我必須爲兩個不同的數組執行映射兩次。 當我地圖this.state.userDetails我得到了錯誤。如果我將它包裝在<div>或<tr>中，則兩者的內容都將放置在設備IMEI <th>中。我該如何解決這個問題？任何幫助非常感謝.. :)

Answer 1

包裝你的內容與JSX糖應該工作。你不需要拼湊結果數組，React會爲你做到這一點。 見 JSX Docs:

{this.state.deviceDetails.map((dev,i)=>{ 
      if(user.idx == dev.uid){ 
      return([ 
       <td>{dev.imei ? dev.imei : "-"}</td>, 
       <td>{dev.dm ? dev.dm : "-"}</td> 
      ]) 
      } 
     })} 

見this問題是上反應Github上頁提高。