エラーはマップ関数からデータを返すことはできませんか？

Question

ブラウザコンソールでオブジェクトを取得します。しかし、私がテキストだけを返そうとすると、リンクは何も返されません。私はコンソールにオブジェクトを取得しますが、.textまたは.linkを追加しようとすると、ページは空白になります。コンソールにエラーは表示されません。

import React, { Component } from 'react'; 

class Navigation extends Component { 

    getLinks = (object) => { 
    Object.keys(object).map((property, i) => { 
     const { text, title } = object[property][i]; 
     console.log(object[property][i]) 
     return (
     <ul>{title} 
     <li>{text}</li> 
     </ul> 
    ) 
    }); 


} 
    render() { 


    let { items } = this.props; 
    return (

     <div> 
     <ul> 
      {this.getLinks(items)} 
     </ul> 
     </div> 

    ); 
    } 
} 

export default Navigation; 

JSON

const navigation = { 
    pageInfo: [ 
    {title: "A title"}, 
    {text: "item 1", link: "https://google.com"}, 
    {text: " item 2", link: "https://googleconquestio.com"} 
    ], 
    pageInfo2: [ 
    {title: "A title"}, 
    {text: "item 1", link: "https://google.com"}, 
    {text: "item 2", link: "https://googleconquestio.com"} 
    ], 
    pageInfo3: [ 
    {title: "Applications"}, 
    {text: "application item 1", link: "https://google.com"}, 
    {text: "application item 2", link: "https://googleconquestio.com"} 
    ] 
} 

Answer 1

物事が起こっているカップル。最初に、マップが返す新しく作成された配列を返しません。次に、配列なので、ナビゲーションオブジェクト内の各キーをループする必要があります。あなたはobject [property] [i]から{title、text}をつかみようとしていますが、タイトルはインデックス0にあり、テキストはインデックス1にあるので動作しません。データを再構成することをお勧めします。

あなたはこのような何かを行うことができます：

const navigation = [ 
    { 
     title: 'Title 1', 
     text: [ 
      { 
       name: 'item 1', 
      }, 
      { 
       name: 'item 2', 
      } 
     ], 
    }, 
    { 
     title: 'Title 2', 
     text: [ 
      { 
       name: 'item 1', 
      }, 
      { 
       name: 'item 2', 
      } 
     ], 
    } 
]; 

return navigation.map(obj => { 

    let listElements = obj.text.map((li, c) => { 
     return (
      <li key={c}>{li.name}</li> 
     ); 
    }); 
    return (
     <ul> 
      {obj.title} 
      {listElements} 
     </ul> 
    ); 
}); 

Answer 2

をあなたはかっこそのように使用している場合は、矢印関数の戻り値を持っている必要があります。ここでは は例JSBinです：興味深いhttps://jsbin.com/mijuh/2/edit?js,console

getLinks = (object) => { 
    return Object.keys(object).map((property, i) => { 
     const { text, title } = object[property][i]; 
     console.log(object[property][i]) 
     return (
     <ul>{title} 
     <li>{text}</li> 
     </ul> 
    ) 
    });