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

【问题标题】：I keep getting this TypeError: Cannot read property 'map' of undefined我不断收到此类型错误：无法读取未定义的属性“地图”
【发布时间】：2021-02-05 15:38:52
【问题描述】：

我正在尝试将此数据从 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

任何帮助都会很棒。

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

【问题讨论】：

试试Array.from(this.state.apiData).map(title => title.rendered)
@prasanth data.data 是undefined，这是引发上述错误的唯一情况
我改变了我的设置状态，它起作用了！但是，当我尝试渲染标题时，我仍然收到此错误，对象作为 React 子级无效（找到：带有键 {rendered} 的对象）。如果您打算渲染一组子项，请改用数组

标签： javascript arrays json object

【解决方案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}

【讨论】：

我改变了我的设置状态，它起作用了！但是，当我尝试渲染标题时，我仍然收到此错误，对象作为 React 子级无效（找到：带有键 {rendered} 的对象）。如果您打算渲染一组子项，请改用数组。