组件异常：未定义不是对象（正在评估“item [0].items.created”）答案

【问题标题】：Component Exception: undefined is not an object (evaluating 'item[0].items.created')组件异常：未定义不是对象（正在评估“item [0].items.created”）
【发布时间】：2020-11-26 15:10:55
【问题描述】：

我想从 States.js 文件中呈现新闻，其中包含如下数据 -

const StateNewsJSON = {
   "items": [
      {
         "title": "Man in poll position",
         "description": "<a href=\"https://www.indiatoday.in/magazine/states/story/20201123-man-in-poll-position-1740686-2020-11-13\"> <img align=\"left\" hspace=\"2\" height=\"180\" width=\"305\" alt=\"\" border=\"0\" src=\"https://akm-img-a-in.tosshub.com/indiatoday/images/story/202011/Assam-Nov23-1-647x363.jpeg?Urkou1FegBD4k33TQkNwtHhXLa.IgXFk\"> </a> Man in poll position",
         "url": "https://www.indiatoday.in/magazine/states/story/20201123-man-in-poll-position-1740686-2020-11-13?utm_source=rss",
         "link": "https://www.indiatoday.in/magazine/states/story/20201123-man-in-poll-position-1740686-2020-11-13?utm_source=rss",
         "created": 1605289389000,
         "category": [],
         "content": null,
         "enclosures": []
      },
      {
         "title": "The CM vs. the judges",
         "description": "<a href=\"https://www.indiatoday.in/magazine/states/story/20201102-the-cm-vs-the-judges-1734176-2020-10-23\"> <img align=\"left\" hspace=\"2\" height=\"180\" width=\"305\" alt=\"\" border=\"0\" src=\"https://akm-img-a-in.tosshub.com/indiatoday/images/story/202010/thumbnail_Revised-Jagan-Ramana-647x363.jpeg?QFtGpyeiWXGPeHwdeRUo5Qw.QvdcF1j8\"> </a> The CM vs. the judges",
         "url": "https://www.indiatoday.in/magazine/states/story/20201102-the-cm-vs-the-judges-1734176-2020-10-23?utm_source=rss",
         "link": "https://www.indiatoday.in/magazine/states/story/20201102-the-cm-vs-the-judges-1734176-2020-10-23?utm_source=rss",
         "created": 1603435891000,
         "category": [],
         "content": null,
         "enclosures": []
      },
      {
         "title": "Whiff of a third front",
         "description": "<a href=\"https://www.indiatoday.in/magazine/states/story/20201102-whiff-of-a-third-front-1734179-2020-10-23\"> <img align=\"left\" hspace=\"2\" height=\"180\" width=\"305\" alt=\"\" border=\"0\" src=\"https://akm-img-a-in.tosshub.com/indiatoday/images/story/202010/Mamta-Nov2-1-647x363.jpeg?h1v3M4sl2nuWWCncY3cVlM3oo1IrniYQ\"> </a> Whiff of a third front",
         "url": "https://www.indiatoday.in/magazine/states/story/20201102-whiff-of-a-third-front-1734179-2020-10-23?utm_source=rss",
         "link": "https://www.indiatoday.in/magazine/states/story/20201102-whiff-of-a-third-front-1734179-2020-10-23?utm_source=rss",
         "created": 1603423936000,
         "category": [],
         "content": null,
         "enclosures": []
      },
      {
         "title": "A grim battle ahead",
         "description": "<a href=\"https://www.indiatoday.in/magazine/states/story/20201102-a-grim-battle-ahead-1734181-2020-10-23\"> <img align=\"left\" hspace=\"2\" height=\"180\" width=\"305\" alt=\"\" border=\"0\" src=\"https://akm-img-a-in.tosshub.com/indiatoday/images/story/202010/AIADMK-Nov2-1-647x363.jpeg?oP515jzQkF92rAVuRRNg_oFMGFBXtH0A\"> </a> A grim battle ahead",
         "url": "https://www.indiatoday.in/magazine/states/story/20201102-a-grim-battle-ahead-1734181-2020-10-23?utm_source=rss",
         "link": "https://www.indiatoday.in/magazine/states/story/20201102-a-grim-battle-ahead-1734181-2020-10-23?utm_source=rss",
         "created": 1603421691000,
         "category": [],
         "content": null,
         "enclosures": []
      },
      {
         "title": "Mamata goes to war",
         "description": "<a href=\"https://www.indiatoday.in/magazine/states/story/20201019-mamata-goes-to-war-1729907-2020-10-10\"> <img align=\"left\" hspace=\"2\" height=\"180\" width=\"305\" alt=\"\" border=\"0\" src=\"https://akm-img-a-in.tosshub.com/indiatoday/images/story/202010/Mamata-Oct19-1_1200x675-647x363.jpeg?wded9DrtpRh.uj1n_iBJ84aIZiy2rh1J\"> </a> Mamata goes to war",
         "url": "https://www.indiatoday.in/magazine/states/story/20201019-mamata-goes-to-war-1729907-2020-10-10?utm_source=rss",
         "link": "https://www.indiatoday.in/magazine/states/story/20201019-mamata-goes-to-war-1729907-2020-10-10?utm_source=rss",
         "created": 1602298764000,
         "category": [],
         "content": null,
         "enclosures": []
      },
      {
         "title": "Delhi HC suspends life term of woman who murdered stepson, asks her to do social service",
         "description": "<a href=\"https://www.indiatoday.in/india/story/delhi-high-court-suspends-life-sentence-woman-murder-social-service-1729109-2020-10-07\"> <img align=\"left\" hspace=\"2\" height=\"180\" width=\"305\" alt=\"\" border=\"0\" src=\"https://akm-img-a-in.tosshub.com/indiatoday/images/story/202010/delhi_high_court-647x363.jpeg?ZJxWSey00I47pjjXAEDNtWnCbyxH4IIp\"> </a> Delhi HC suspends life term of woman who murdered stepson, asks her to do social service",
         "url": "https://www.indiatoday.in/india/story/delhi-high-court-suspends-life-sentence-woman-murder-social-service-1729109-2020-10-07?utm_source=rss",
         "link": "https://www.indiatoday.in/india/story/delhi-high-court-suspends-life-sentence-woman-murder-social-service-1729109-2020-10-07?utm_source=rss",
         "created": 1602043793000,
         "category": [],
         "content": null,
         "enclosures": []
      },
      {
         "title": "Brutal, diabolic crime deserves harshest punishment: Delhi man gets death for murder of 12-year-old boy",
         "description": "<a href=\"https://www.indiatoday.in/crime/story/death-penalty-child-murder-kidnapping-1729090-2020-10-07\"> <img align=\"left\" hspace=\"2\" height=\"180\" width=\"305\" alt=\"\" border=\"0\" src=\"https://akm-img-a-in.tosshub.com/indiatoday/images/story/202010/Stab-647x363.jpeg?G7e4RkrHkR16Om_KvLPitYXKZbPUnYQZ\"> </a> Delhi: Man awarded death penalty for brutal murder of 12-year-old boy",
         "url": "https://www.indiatoday.in/crime/story/death-penalty-child-murder-kidnapping-1729090-2020-10-07?utm_source=rss",
         "link": "https://www.indiatoday.in/crime/story/death-penalty-child-murder-kidnapping-1729090-2020-10-07?utm_source=rss",
         "created": 1602039195000,
         "category": [],
         "content": null,
         "enclosures": []
      },
      {
         "title": "The battle of alliances",
         "description": "<a href=\"https://www.indiatoday.in/magazine/states/story/20200928-the-battle-of-alliances-1723087-2020-09-19\"> <img align=\"left\" hspace=\"2\" height=\"180\" width=\"305\" alt=\"\" border=\"0\" src=\"https://akm-img-a-in.tosshub.com/indiatoday/images/story/202009/Bihar-Poll-New-Sep28-1-647x363.jpeg?cyI7usfSTpQ0erH2zAHy2PUu4ULGw1xv\"> </a> The battle of alliances",
         "url": "https://www.indiatoday.in/magazine/states/story/20200928-the-battle-of-alliances-1723087-2020-09-19?utm_source=rss",
         "link": "https://www.indiatoday.in/magazine/states/story/20200928-the-battle-of-alliances-1723087-2020-09-19?utm_source=rss",
         "created": 1600489646000,
         "category": [],
         "content": null,
         "enclosures": []
      },
      {
         "title": "Prince of Trinamool",
         "description": "<a href=\"https://www.indiatoday.in/magazine/states/story/20200921-prince-of-trinamool-1720876-2020-09-12\"> <img align=\"left\" hspace=\"2\" height=\"180\" width=\"305\" alt=\"\" border=\"0\" src=\"https://akm-img-a-in.tosshub.com/indiatoday/images/story/202009/Abhishek-Banerjee-Sep21-1-647x363.jpeg?oqArA1FNTF2KqPhLmBxHJrlbV9troalb\"> </a> Prince of Trinamool",
         "url": "https://www.indiatoday.in/magazine/states/story/20200921-prince-of-trinamool-1720876-2020-09-12?utm_source=rss",
         "link": "https://www.indiatoday.in/magazine/states/story/20200921-prince-of-trinamool-1720876-2020-09-12?utm_source=rss",
         "created": 1599886507000,
         "category": [],
         "content": null,
         "enclosures": []
      }
   ],
   "title": "India Today | States",
   "description": "India Today",
   "link": "http://indiatoday.intoday.in/?utm_source=rss",
   "category": [],
   "image": "https://www.indiatoday.in/sites/all/themes/itg/logo.png"
}

export const StateNewsData = Object.keys(StateNewsJSON).map(key => ({
   key,
   ...StateNewsJSON[key]
}))

我正在尝试在 StateNews.js 中呈现数据，如下所示 -

import React, { Component } from 'react'
import { View, Text, FlatList, TouchableHighlight } from 'react-native'
import { StateNewsData } from "../../../../assects/JSON/States"

class StateNews extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  renderStateNews = ({ item }) => {
    return (
      <TouchableHighlight>
        <View>
          <Text>{ item[0].items.title}</Text>
        </View>
      </TouchableHighlight>
    )
  }

  render() {
    return (
      <View>
        <FlatList
        data={StateNewsData}
        renderItem={this.renderStateNews}
        numColumns={2}
        keyExtractor={(item) => item[0].items.created}
      />
      </View>
    )
  }
}

export default StateNews

但是当我导航到应用程序中的特定组件时，它会显示上述错误。我想知道我错过了一个愚蠢的问题。我检查了文档，看看我是否犯了任何错误，但我找不到任何错误。在这种情况下，谁能帮帮我？

我还附上了我的错误截图的 URL 以供进一步参考 - screenshot of my app with error

【问题讨论】：

标签： javascript react-native expo rendering undefined

【解决方案1】：

    const StateNewsData = StateNewsJSON.items;
  return (
    <View style={styles.app}>
      <FlatList
        data={StateNewsData}
        renderItem={({item}) => <Text>{item.title}</Text>}
      />
    </View>
  );
};

我对代码做了一些修改。请为您的数组长度输入控制台。

【讨论】：

首先。我导出了数组 StateNewsData 而不是对象 StateNewsJSON。但是，在您发布之后，我导出了 StateNewsJSON 并尝试了您的代码，但现在 item[0].items 出现了同样的错误。
Csn u 打印数据？他们是否符合您的要求。在您的渲染项目中，您必须再添加一个花括号。 U hv 传递对象。
对于我在您的平面列表中的理解，您想要关键项目中的数据吗？对吗？？？
我想在我的应用程序中以两列卡片类型呈现不同的数据（如标题、URL 等）...每张卡片将包含一个新闻数据...