React獲取另一個對象內的對象

Question

我有一個簡單的json api，想顯示帶有react的一些對象字段。 該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>
)}

但

如果我嘗試使用{item.attributes.title}我會收到

TypeError: Cannot read property 'title' of undefined

因此item.attributes是未定義的。

怎么了

Answer 1

這應該對您有幫助。 我在您的程序中找不到錯誤。 因此，我創建了一個有效的示例來解決此問題。

 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> 

Answer 2

這是最常見的錯誤，因為您永遠不知道將從服務器獲取什么對象，因此，這始終是在訪問數據之前進行檢查的好方法，因此您可以嘗試

{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