Javascript 无法读取属性'；过滤器'；对于未定义的，React.js

我正在尝试使用SpotifyAPI获取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;

---

事先谢谢你的帮助

您试图在redux状态定义对象之前访问对象

this.state.albums

只有在定义之后才能访问它。你可以用三元溶液或其他有同样用途的溶液

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

---

您的参数名称不正确。您正在尝试筛选“this.state.albums”，其中在状态中，键名为“album”，将其更改为“this.state.album”无法解决问题：/n现在它显示“this.state.album.filter不是函数”作为错误尝试在运行筛选之前添加console.log（this.state）。此外，过滤器仅适用于阵列。它在对象上不起作用，这是因为筛选器仅对数组可用。它们不处理对象（）

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