无法读取未定义的属性“过滤器”，React.js答案

【问题标题】：Cannot read property 'filter' of undefined , React.js无法读取未定义的属性“过滤器”，React.js
【发布时间】：2021-06-03 17:03:10
【问题描述】：

我正在尝试使用 Spotify API 获取 Spotify 专辑并使用 Reactjs 显示它们。但是有一个问题我无法解决，我检查了很多类似的问题，但还没有找到方法。我确定我遗漏了一些观点。所以，这里是代码

import React from 'react';
import AlbumList from './AlbumList';
import SearchBar from './SearchBar';
import Spotify from 'spotify-web-api-js';

const spotifyApi = new Spotify();

class App extends React.Component {
    constructor(){
        super();
        const params = this.getHashParams();
        this.state={ 
            loggedIn: params.access_token ? true: false,
        }
        if(params.access_token){
            spotifyApi.setAccessToken(params.access_token)
        }
           
    }
    getHashParams() {
        var hashParams = {};
        var e, r = /([^&;=]+)=?([^&;]*)/g,
            q = window.location.hash.substring(1);
        while ( e = r.exec(q)) {
           hashParams[e[1]] = decodeURIComponent(e[2]);
        }
        return hashParams;
    }

    state = { 
        albums:[],
        searchQuery:""
    }

    async componentDidMount(){
        const baseURL = "http://localhost:3002/albums";
       
        const response = await fetch(baseURL);
        const data = await response.json();
        this.setState({albums: data})

        spotifyApi.getAlbums(['5U4W9E5WsYb2jUQWePT8Xm', '3KyVcddATClQKIdtaap4bV']).then(
            function (data) {
              console.log('Albums information', data);
            },
            function (err) {
              console.error(err);
            }
        );
    }
    deleteAlbum = async (album) =>{ 
        const baseURL = `http://localhost:3002/albums/${album.id}`;
        await fetch (baseURL, {
            method:"DELETE"
        })
        const newAlbumList = this.state.albums.filter(
            a => a.id !== album.id
        );
        this.setState(state => ({
            albums:newAlbumList
        }))
    }

    searchAlbum=(event)=>{
        this.setState({searchQuery: event.target.value})
    }
    
    getAlbums(){
        spotifyApi.getMySavedAlbums()
        .then((response)=>{
            this.setState({
                album:{
                    name: response.item.album,
                    imageURL: response.item.album.images[0].url
                }
            })
        })
    }

    render(){
        let filteredAlbums = this.state.albums.filter(
            (album) => {
                return album.name.toLowerCase().indexOf(this.state.searchQuery.toLowerCase()) !== -1
            }
        )
        return(

            <div className = "App">
                <a href= "http://localhost:8888">
                    Log in with Spotify
                </a>
                <div className = "container">
                    <div className="row">
                        <div className="col-lg-12">
                            <SearchBar 
                            searchAlbumProp={this.searchAlbum}/>  
                        </div>
                    </div>
                    <button onClick={()=>this.getAlbums()}>
                        Get Album List
                    </button>
                    <AlbumList 
                    albums={filteredAlbums}
                    deleteAlbumProp={this.deleteAlbum}/> 
                </div>
            </div>
        )
    }
}

export default App;

这是我遇到的问题：

这个问题只会在我写这部分代码的时候出现：

this.state={
        loggedIn: params.access_token ? true: false,
        album :{
            name: 'Not checked'
        }
    }

提前感谢您的帮助！

【问题讨论】：

您的参数名称不正确。您正在尝试过滤状态中的“this.state.albums”，键名为“album”
将其更改为“this.state.album”无法解决问题：/
现在它说“this.state.album.filter is not a function”作为错误
尝试在运行过滤器之前添加一个 console.log(this.state)。过滤器也仅适用于数组。它不适用于对象
那是因为过滤器仅适用于数组。它们不适用于对象 (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…)

标签： javascript reactjs api

【解决方案1】：

您正试图在对象 this.state.albums 由 redux 状态定义之前访问它。

只有在定义后才能访问。您可以使用三元或其他具有相同目的的解决方案来做到这一点。

let filteredAlbums = Array.isArray(this.state.albums)
  ? this.state.albums.filter((album) => {
      return (
        album.name
          .toLowerCase()
          .indexOf(this.state.searchQuery.toLowerCase()) !== -1
      );
    })
  : [];

【讨论】：