React：flattenChildren（...）：同じキーを持つ2人の子供が出会った

Question

私はこの質問が以前に尋ねられたことは知っていますが、ここで何が起こっているのか分かりません。私はナビゲーションを作成するためにReactコンポーネントにマッピングしているオブジェクトの配列を持っています：いくつかの要素は子を持つことができるので、これらの要素に対して2番目の.map関数を追加しています。 すべてが正常に動作しますが、2つ目の子要素は「同じキーを持つ2人の子に遭遇する」ため表示されません。混乱...誰も理由を説明できますか？私は現在ユニークなキーとしてタイトルを使用しています。

は、ここに私の項目の配列

let navItems = [ 
    { 
    title: "Home", 
    href: "/", 
    children: [] 
    }, 
    { 
    title: "Evaluations", 
    href: "/evaluations", 
    children: [ 
     { 
     id: 1, 
     title: "List all evalutions", 
     href: "/" 
     }, 
     { 
     id: 2, 
     title: "Planner", 
     href: "/" 
     }, 
    ] 
    } 
] 

であり、ここでのコードです：あなたが繰り返しでアイテムをレンダリングしている間は、各要素に固有のkeyを提供する必要があります

let items = this.props.items.map((item) => { 
    if(item.children.length > 0) { 
    return item.children.map((child) => { 
     return <li className="menu--item" key={ item.title }> 
     <a href={ item.href } className="menu--link">{ item.title }</a> 
     <ul className="dropdown"> 
      <li key={ child.title }><a href="{ child.href}">{ child.title }</a></li> 
     </ul> 
     </li> 
    }) 
    } else { 
    return <li className="menu--item" key={ item.title }> 
     <a href={ item.href } className="menu--link">{ item.title }</a> 
    </li> 
    } 
}) 

Answer 1

これはitem.childrenをマッピングしていて、item.titleのキーを返しているために発生しています。 item.titleはそのループ内で変更されないので、キーが「評価」の2 <li>要素になります。私はmapを<ul className="dropdown">の中に使いたいと思う。

let items = this.props.items.map((item) => { 
    if(item.children.length > 0) { 
     return <li className="menu--item" key={ item.title }> 
     <a href={ item.href } className="menu--link">{ item.title }</a> 
     <ul className="dropdown"> 
      {item.children.map((child) => { 
      return <li key={ child.title }><a href="{ child.href}">{ child.title }</a></li> 
      })} 
     </ul> 
     </li> 
    } else { 
    return <li className="menu--item" key={ item.title }> 
     <a href={ item.href } className="menu--link">{ item.title }</a> 
    </li> 
    } 
}) 

Answer 2

。ここで

、あなたはその項目のそれぞれの子に同じであり、あなたがitem.children.length > 0場合は配列を返すとelseた場合の要素を返却する項目のchildrenのキーとしてitem.titleを使用しています。

let items = this.props.items.map((item) => { 
    if(item.children.length > 0) { 
    return (
     <div key={item.id}> 
     {item.children.map((child) => { 
      return (
      <li className="menu--item" key={ child.id }> 
       <a href={ item.href } className="menu--link">{ item.title }</a> 
       <ul className="dropdown"> 
       <li key={ child.title }><a href="{ child.href}">{ child.title }</a></li> 
       </ul> 
      </li> 
     ) 
     })} 
     </div> 
    ) 
    } else { 
    return <li className="menu--item" key={ item.id }> 
     <a href={ item.href } className="menu--link">{ item.title }</a> 
    </li> 
    } 
}) 

と、このような各navLinkで一意のIDがあるはず：

let navItems = [ 
    { 
    id: '1', 
    title: "Home", 
    href: "/", 
    children: [] 
    }, 
    { 
    id: '2', 
    title: "Evaluations", 
    href: "/evaluations", 
    children: [ 
     { 
     id: '2.1', 
     title: "List all evalutions", 
     href: "/" 
     }, 
     { 
     id: '2.2', 
     title: "Planner", 
     href: "/" 
     }, 
    ] 
    } 
] 

希望、それが役立ちます私は、あなたがこのようにそれを書くべきだと思います。