jsx内のマップ内のマップを使用

Question

{normalizedData.map(obj => 
    <div key={obj.display_date_numberic}> 
     <div>{obj.display_date_numberic}</div> 
    </div> 

    {!isEmpty(obj.applicants) && obj.map(obj2 => 
     <div className="events">{obj2.person.name}</div> 
    )} 
)} 

リンクisEmptyでエラーが発生しました。なぜマップ内にマップを作成できないのですか？私はオブジェクトの配列内にオブジェクトの配列を持っています。

Answer 1

理由は、render複数の要素にしようとしている、我々はそれを行うことはできません、我々は1つの要素だけを返すことができます。だから、すべてのロジックと、このような1 div内の要素をラップ：obj.applicantsを想定し

{normalizedData.map(obj => 
    <div key={obj.display_date_numberic}> 
     <div>{obj.display_date_numberic}</div> 

     {Array.isArray(obj.applicants) && obj.applicants.map(obj2 => 
      <div className="events">{obj2.person.name}</div> 
     )} 
    </div> 
)} 

は、任意の値が適切な配列やない

注であるかどうかをチェックするために​​を使用し、arrayです：私たちは使用することができますmapのみarrayにはありません。objectであるため、objがオブジェクトで、Object.keys(obj)を使用してすべてのキーのarrayを取得する場合は、mapを使用してください。

Answer 2

だけのアドバイスは、あなたの代わりにあなたのコードにHACE map

Answer 3

明らかに誤りのforを使用することができますが、内部マップにobj.applicantsにマッピングすることなくobjをしてから、単一の要素を返すべきである、ということですまた、アウターマップ

obj.applicantsが配列の場合、isEmpty

{normalizedData.map(obj => 
    <div> 
    <div key={obj.display_date_numberic}> 
     <div>{obj.display_date_numberic}</div> 
    </div> 

    { obj.applicants.map(obj2 => 
     <div className="events">{obj2.person.name}</div> 
    )} 
    </div> 
)}