时间戳

首页 > 解决方案 > 无法读取未定义的属性“过滤器”，React.js

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

问题描述

我正在尝试使用 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'
        }
    }

事先感谢您的帮助！

标签： javascriptreactjsapi

解决方案

您正在尝试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
      );
    })
  : [];

推荐阅读