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

如果我尝试使用{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

React get对象在另一个对象中

2 个答案: