Блог

Главная - Вопросы по программированию - Исключение компонента: неопределенный не является объектом (оценка ‘item [0].items.created’)

Исключение компонента: неопределенный не является объектом (оценка ‘item [0].items.created’)

#javascript #react-native #expo #rendering #undefined

#javascript #реагировать -родной #выставка #рендеринг #не определено

Вопрос:

Я хочу отобразить новости из 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-адрес скриншота моей ошибки для дальнейшего ознакомления — скриншот моего приложения с ошибкой

Ответ №1:

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

Я внес некоторые изменения в код. Пожалуйста, укажите console для вашей длины массива.

Комментарии:

1. Прежде всего. Я экспортировал массив StateNewsData, а не объект StateNewsJSON . Однако после вашего сообщения я экспортировал StateNewsJSON и попробовал ваш код, но получил ту же ошибку с now item[0].items .

2. Csn u напечатать данные? Соответствуют ли они вашим требованиям. Во-вторых, при рендеринге элемента ur вам нужно добавить еще одну фигурную скобку. U hv для передачи объекта.

3. Насколько я понимаю, в плоском списке ur вам нужны данные в ключевых элементах? Верно???

4. Я хочу отображать разные данные (например, заголовок, URL и т. Д.) В моем приложении в виде карточки с двумя столбцами… каждая карточка будет содержать одну новостную информацию…

Метки: