在与 API 调用关联的函数中：未捕获（承诺中）类型错误：无法读取未定义的属性“包含”

Posted 2023-03-16

【中文标题】在与 API 调用关联的函数中：未捕获（承诺中）类型错误：无法读取未定义的属性“包含”

【英文标题】：In a function associated with an API call: Uncaught (in promise) TypeError: Cannot read property 'includes' of undefined

【发布时间】：2021-07-30 16:45:39

【问题描述】：

我正在使用电影 DB API（https://developers.themoviedb.org/3/genres/get-movie-list 这个） 然后我用 VUE 在我的页面上打印我的调用结果。 API 为我提供了实现目标所需的所有数据，就是这样

如您所见，在节目名称下有与该名称相关的流派。 我们以 API 给我 A-Team 时获得的对象为例

"backdrop_path": "/ggPjnOA5sap6wyuAGUY7kwRseEi.jpg",
            "first_air_date": "1983-01-23",
            "genre_ids": [
                10759
            ],
            "id": 1516,
            "media_type": "tv",
            "name": "A-Team",
            "origin_country": [
                "US"
            ],
            "original_language": "en",
            "original_name": "The A-Team",
            "overview": "Un commando di ex-combattenti della guerra del Vietnam chiamato A-Team (Squadra A), un tempo appartenenti ai corpi speciali dell'esercito degli Stati Uniti, viene accusato ingiustamente di aver rapinato la banca di Hanoi. Evasi in maniera rocambolesca, vivono ora in fuga, ricercati e braccati dalle autorità per un reato che non hanno mai commesso. I componenti della squadra sopravvivono prestando servizio come mercenari e venendo, nella quasi totalità degli episodi, assoldati da varie persone o gruppi di persone che vivono oppresse da situazioni d'ingiustizia nei propri confronti. Grazie alle qualità militari e umane dell'A-Team, ogni episodio si risolve in maniera definitiva a favore dei più deboli. Pur essendo visti come mercenari dagli altri personaggi della serie, i membri dell'A-Team sono dunque schierati sempre dalla parte del bene. Famoso è il loro furgone GMC Vandura nero e grigio con 2 strisce rosse laterali che si uniscono sullo spoiler superiore, usato come mezzo principale di trasporto dell'A-Team.",
            "popularity": 141.786,
            "poster_path": "/iJsueZM8TqQzeB55tol4mnyQzb9.jpg",
            "vote_average": 7.4,
            "vote_count": 574
        ,

如您所见，有一个名为 genre_ids 的子数组，其中包含此特定节目的相关类型的 ID。为了获得名称，我使用了另一个 API 调用，它为我提供了一个对象数组，其中每个对象都有两个属性，一个流派的 id 和一个流派的名称。因此，从这个数组中，您可以轻松获取节目的相关流派名称并将其打印出来。 我是这样操作的，对shows'API调用得到的数组做.map：

searchShow() 是一个函数，当您在上图中看到的input 中按回车键时，this.userSearch 实际上是与该input 关联的v-model。

searchShow() 
            axios
                // this is the call that provides me an array of object like the A-Team's one seen before
                .get(`https://api.themoviedb.org/3/search/multi`, 
                params: 
                            api_key: this.apiKey,
                            query: this.userSearch,
                            language: this.userLanguage,
                        ,
                )
                .then((response) => 
                    const result = response.data.results;
                    // I save result in an empty array created in data 
                    this.searchResults = result;

                    // I insert a new property inside the array obtained right now,
                    // this property provides me genres name
                    
                    const newArray = this.searchResults.map ((element) => 
                        let objectResults = element.genre_ids;
                        let object = element;
                        // object.genres_name it's an empty array where I save in my results
                        object.genres_name = [];
                        // this.genresList it's the array in which I've saved the API call that gives me objects with ids and genres's name
                            this.genresList.forEach(genre => 
                            // ids of genres are the same everywhere. If the ones in the 
                            // genresList array are included in each element.genre_ids
                            // then push the name as an object, so it's printable in html
                            if (objectResults.includes(genre.id)) 
                                object.genres_name.push(
                                    
                                        genre: genre.name
                                    
                                        
                                    );
                                
                            )
                            
                    // return the element updated
                    return object;
                    )
                    // this.arrayProva is now equal to the map of the original array and it's
                    // the array printed in HTML
                    this.arrayProva = newArray;
                );
        ,

有了这个，我可以轻松地在 HTML 中打印流派的名称，因为我添加了一个基于现有属性的新属性。当一个节目没有关联任何类型时，问题就出现了，也许是一个不那么有名的节目，但它破坏了我的项目，因为错误出现并且 vue 不再打印搜索结果。 发生这种情况是因为单个元素没有我用来将流派名称添加到任何单个节目的子数组流派 ID。 我怎样才能避免这种情况？

【参考方案1】：

如果问题是您只需要处理API结果中未定义element.genre_ids的情况，我认为您可以简单地将objectResults的赋值更改为：

let objectResults = element.genre_ids || [];

如果从 API 获得的数组为 null 或未定义，这将提供一个默认的空数组。

【讨论】：

谢谢，我什至不知道你可以这样声明变量