React Native выдает ошибку: TypeError: undefined не является объектом (оценка 'item.enclosures [0] .url')

Question

У меня возникла эта проблема, которая, я думаю, связана с медленной загрузкой. Я получаю из itunes API, чтобы получить подкасты для этого приложения, которое я создаю. на некоторых подкастах он работает, но на других он показывает это сообщение. Вот ошибка: [изображение ошибки] [1]: https://i.stack.imgur.com/tMmhP.png Вот мой код:

EpisodesView .tsx:

    import React, { useState, useEffect } from 'react';
import { ScrollView, Text } from 'react-native';
import { observer } from "mobx-react";
//components
import Episode from './Episode';
import { useRootStore } from '../contexts/RootStoreContext';
import BottomGap from './BottomGap';
import PodcastTitle from './PodcastTitle';
import PodcastImage from './PodcastImage';
import SubscribeIcon from './SubscribeIcon';
import { fetchPodcast } from '../Api/Fetches';

//shows all of the episodes of a certain podcast
const EpisodesView = ({ route, navigation }) =>{ 
     //a constant to tell the <Episode /> what page he is on
     const fromMyListScreen = false;  
    // const { cachingStore } = useRootStore();

    const [podcast, setPodcast] = useState({
        title:'',
        image: undefined,
        description: '',
    })
    const [rss, setRss ] = useState();

    useEffect(() => {
        //fetch podcast
        fetchPodcast(route.params.rssUrl)
            .then((rss) => {
                setRss(rss);
            })
            .catch((err)=>{
                console.log(err)
            })
    })

    //show all episodes of the podcast
    const showEpisodes = () => {
        return rss.items.map(item => {
            var track = {
                id: item.id,
                url: item.enclosures[0].url,
                title: item.title,
                artwork: item.itunes.image ,
                artist: rss.title,
                description: item.description,
                duration: item.itunes.duration,
                rssUrl: route.params.rssUrl,
            }
            return (
                <Episode track={track} key={track.id} fromMyListScreen={fromMyListScreen} />
            );
        })

    }
    var showTitle = rss?(
        <PodcastTitle title= {rss.title}/>
    ):(
        undefined
    )

    var showImage = rss? (
        <PodcastImage image={rss.itunes.image}/>
    ):(
        undefined
    )

    return (      
        <ScrollView>      
          {showTitle}
           {showImage}
           <SubscribeIcon />
            <Text style={{ paddingTop:20,paddingBottom:20}}>{podcast.description}</Text>           
            {rss? showEpisodes(): undefined}
           <BottomGap />
        </ScrollView >
    )
};

export default observer(EpisodesView);

файл, из которого я получаю: Fetches.ts:

//fetches a specific podcast
export const fetchPodcast = (url) =>{   
    return fetch(url)
    .then((response) => {
        return response.text()
    })
    .then((data) => {
         return rssParser.parse(data)
     })
    .then((rss) => {
        return rss;
    })
     .catch(err => {
        console.log(err);
    });
};

Я должен сказать, что он существует, а не undefined, проверяя с помощью console.log + postman кстати, при этом:

var track = {
                id: item.id,
                //url: item.enclosures[0].url,
                title: item.title,
                artwork: item.itunes.image ,
                artist: rss.title,
                description: item.description,
                duration: item.itunes.duration,
                rssUrl: route.params.rssUrl,
            }

возникает еще одна проблема с другой функцией, которая отображает продолжительность, поэтому я считаю, что ей просто не удается получить все это перед рендерингом (кстати, это синтаксис подкаста ')

У вас есть решение? спасибо

Answer 1

Если вы не ошибаетесь насчет медленного времени отклика API, вам следует подумать о добавлении переменной состояния загрузки / извлечения (const [isFetching, setFetchingStatus] = useState(true) и просто установите здесь значение состояния false: кажется, что API не возвращает определенное значение для enclosures[0].url, чтобы просто зарегистрировать ответ API и проверить, есть ли это.