我不断收到此类型错误：无法读取未定义的属性“地图”

Question

我正在尝试将 API 中的这些数据呈现到我的页面上。 我知道我要渲染的不是典型的数组，它的 javascript object 让我失望。 使用我的代码，API 数据只是能够访问的问题，因为。map 不起作用，因为我拥有的数据不是数组。 我需要创建另一个 function 吗？

我不知道

import React from 'react';
import './App.css';

class App extends React.Component {
 
  state = {
  apiData: []
  }
 
  render() {   
    
  console.log('api datat is')

    return (
      <div>
        <center>
        <h1>hello something</h1></center>
        {this.state.apiData.map(title => title.rendered)}
      </div>
    )
  }
 
  componentDidMount() {
    fetch('http://www.mocky.io/v2/5dece3d333000052002b9037')
      .then(response => response.json())
      .then(data => {
        this.setState({
          apiData: data.data
        })
      })        
      console.log("component fetched data")
  }
}
 
export default App

任何帮助都会很棒。

我还在学习如何编码，所以要友善

Answer 1

查看 API 响应：

{
  "id": 233383,
  "date": "2019-10-28T10:50:53",
  "date_gmt": "2019-10-28T10:50:53",
  "modified": "2019-10-28T10:55:14",
  "modified_gmt": "2019-10-28T10:55:14",
  "link": "https:\/\/www.stylist.co.uk\/long-reads\/friendship-friends-whatsapp-facebook-messenger-social-media-group-chat-best-friends-psychology-advice\/233383",
  "title": {
    "rendered": "Whatsapp and Facebook Messenger: how group chat is changing the dynamic of our friendships"
  },
  "slug": "whatsapp-and-facebook-messenger-how-group-chat-is-changing-the-dynamic-of-our-friendships",

等等

它没有.data属性，所以

  .then(data => {
    this.setState({
      apiData: data.data
    })
  }) 

将undefined设置为this.state.apiData 。

唯一rendered存在于响应中的一个顶级 object 中，因此您应该完全删除.map ，例如：

  .then(data => {
    this.setState({
      apiData: data
    })
  })  

<h1>hello something</h1></center>
{this.state.apiData.title.rendered}