Reactオブジェクトを別のオブジェクトの中に入れよう

Question

私は単純なjson APIを持っていて、反応のあるいくつかのオブジェクトフィールドを表示したい。 は、APIには、以下の構造を有する：

{"data" : [ 
    0: Object 
    id: "1" 
    type: "Item" 
    attributes: Object 
     title: "lorem impsum" 
     body: "lorem ipsum" 

    1: Object 
    id: "2" 
.... 
]} 

そして、私が表示しようとしている項目（タイトル、本文を）属性

を問題は

これが正常に動作し、ID

を表示するということです

{items.map(item => 
    <div>{item.id}</div> 
)} 

BUT

0123を使用しようとすると私はそうitem.attributesが定義されていない

TypeError: Cannot read property 'title' of undefined

を受けます。

ここで何が間違っていますか？

Answer 1

これはあなたがサーバから取得しようとしているオブジェクトを知っていることはありませんので、発生した最も一般的なエラーであるため、常にデータにアクセスする前にチェックするための良い方法です、あなたので、試すことができます

{item.attributes && item.attributes.title ? item.attributes.title : 'print something for missing title' } 

//item.attributes && item.attributes.title means if both the values are present in Object 

Answer 2

これはあなたに役立つでしょう。あなたのプログラムでエラーが見つかりませんでした。ですから、これを解決するための実例を作成しました。

const data = { 
 
    "data": [{ 
 
    id: "1", 
 
    type: "Item", 
 
    attributes: { 
 
     title: "lorem impsum", 
 
     body: "lorem ipsum", 
 
    } 
 
    }, { 
 
    id: "1", 
 
    type: "Item", 
 
    attributes: { 
 
     title: "lorem impsum", 
 
     body: "lorem ipsum", 
 
    } 
 
    }, { 
 
    id: "1", 
 
    type: "Item", 
 
    attributes: { 
 
     title: "lorem impsum", 
 
     body: "lorem ipsum", 
 
    } 
 
    }, { 
 
    id: "1", 
 
    type: "Item", 
 
    attributes: { 
 
     title: "lorem impsum", 
 
     body: "lorem ipsum", 
 
    } 
 
    }] 
 
} 
 

 
class Sample extends React.Component{ 
 
    render() { 
 
    return <div> 
 
     { 
 
     data.data.map((el) => { 
 
      return <div> 
 
      <h1>{el.id}</h1> 
 
      <div>{el.attributes.title}</div> 
 
      <div>{el.attributes.body}</div> 
 
      </div> 
 
     }) 
 
     } 
 
     </div> 
 
    } 
 
} 
 

 
ReactDOM.render(<Sample/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>