React Native 给出错误：TypeError: undefined is not an object (evalating 'item.enclosures[0].url')

Question

我一直遇到这个问题，我认为这与获取速度慢有关。 我从 itunes API 获取我构建的这个应用程序的播客。 在某些播客上它设法工作，但在其他播客上它显示了该信息， 这是错误：

错误图片：

这是我的代码：

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);
    });
};

我必须说它确实存在，而不是未定义，用 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：

fetchPodcast(route.params.rssUrl)
        .then((rss) => {
            setRss(rss);
            setFetchingState(false);
        })
        .catch((err)=>{
            console.log(err)
        })

但似乎 API 没有向 enclosures[0].url 返回定义的值，以确保只记录 API 响应并检查它是否返回。