我的js文件不斷收到錯誤“ TypeError：無法讀取未定義的屬性'albumCover'”。

Question

我試圖從“ album.js”導入數據以顯示“ Album.js”中的所有標題，al專輯封面等時，我不斷收到“ TypeError：無法讀取未定義的屬性'albumCover'”。

這是我的“ Album.js”，我將在其中顯示所有“ album.js”信息。

import React, { Component } from 'react';
import albumData from './../data/albums';


class Album extends Component {
constructor(props) {
    super(props);

const album = albumData.find( album => 
    {return album.slug === this.props.match.params.slug});

this.state = {
          album: album
};
}

render() {
    return (
      <section className="album">
        <img id="album-cover-art" src={this.state.album.albumCover} alt={this.state.album.title}/>
        <section id="album-info">
            <img id="album-cover-art" />
          <div className="album-details">
            <h1 id="album-title">{this.state.album.title}</h1>
            <h2 className="artist">{this.state.album.artist}</h2>
            <div id="release-info">{this.state.album.releaseInfo}</div>
          </div>
        </section>
        <table id="song-list">
       <colgroup>
         <col id="song-number-column" />
         <col id="song-title-column" />
         <col id="song-duration-column" />
       </colgroup>  
        <tbody>
        {this.state.album.songs.map( (song, index) =>
        <tr className="song" key={index} onClick={() => this.handleSongClick(song)} >
          <td className="song-actions">
            <button>
              <div className="ion-play"></div>
            </button>
          </td>
          <td className="song-title">{song.title}</td>
          <td className="song-duration">{song.duration}</td>
        </tr>
        )}
        </tbody>
        </table>
      </section>
    );
  }
}
export default Album

這是我的“ album.js”，我在其中存儲相冊的所有數據。

// this album data are being stored
export default [{
title: 'The Colors',
artist: 'Pablo Picasso',
releaseInfo: '1909 Spanish Records',
albumCover: '/assets/images/album_covers/04.gif',
slug: 'the-colors',
songs: [
    { title: 'Blue', duration: '2:41', audioSrc: '/assets/music/blue.mp3' },
    { title: 'Green', duration: '1:43', audioSrc: '/assets/music/green.mp3' },
    { title: 'Red', duration: '4:28', audioSrc: '/assets/music/red.mp3' },
    { title: 'Pink', duration: '2:33', audioSrc: '/assets/music/pink.mp3' },
    { title: 'Magenta', duration: '6:14', audioSrc: '/assets/music/magenta.mp3' }
]
}, {
  title: 'The Telephone',
  artist: 'Guglielmo Marconi',
  releaseInfo: '1909 EM',
  albumCover: '/assets/images/album_covers/02.jpg',
  slug: 'the-telephone',
  songs: [
    { title: 'Blue', duration: '2:41', audioSrc: '/assets/music/blue.mp3' },
    { title: 'Green', duration: '1:43', audioSrc: '/assets/music/green.mp3' },
    { title: 'Red', duration: '4:28', audioSrc: '/assets/music/red.mp3' },
    { title: 'Pink', duration: '2:33', audioSrc: '/assets/music/pink.mp3' },
    { title: 'Magenta', duration: '6:14', audioSrc: '/assets/music/magenta.mp3' }
  ]
}];

Answer 1

當您傳遞匹配的slug時，您的代碼運行良好，但是當不存在匹配的slug它將引發錯誤，您應為不匹配的值處理錯誤。

在這里檢查： https : //react-stack-post-sample-10.stackblitz.io