Question

我正在尝试将此数据从 API 呈现到我的页面上。我知道我试图渲染的内容不在典型数组中，它是一个让我失望的 javascript 对象。使用我的代码，API 数据在那里只是能够访问的问题，因为 .map 不起作用，因为我拥有的数据不是数组。我需要创建另一个函数吗？

我不确定

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 存在于响应中的一个顶级对象中，因此您应该完全删除 .map，例如：

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

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

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

1 个答案: