複数の返信​​は、マップからそれらを囲まれたタグ内にラップせずに返します。

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> 

上記は私がレンダリングしたいテーブルです。 テーブルコンテンツを表示するには2つの配列があります。 したがって、私は両方の異なる配列に対してマッピングを2回実行する必要があります。 私がマップするとthis.state.userDetails私はエラーが発生しました。 <div>または<tr>の中に入れた場合、コンテンツは両方ともDevice 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> 
      ]) 
      } 
     })} 

が反応Githubのページで発生しthis問題を参照してください。