如何实现点击指定专辑仅显示该专辑歌曲？解决全量歌曲显示问题

Hey there! Let’s get this sorted out—you’re so close, just missing a key step to tie album clicks to filtering their specific songs. Let’s break down the problem and walk through actionable fixes, with code examples for both vanilla JS and React since those are the most common setups.

Common Root Causes First #

Before diving into code, let’s make sure we’re avoiding these easy-to-miss mistakes:

• You’re not passing a unique identifier (like an albumId) when clicking an album, so your app doesn’t know which album to target.
• You’re loading all songs every time instead of filtering them against the selected album’s ID.
• Your filter logic is using a non-unique value (like album name) which can break if two albums share the same title.

Solution 1: Vanilla JavaScript Implementation #

Let’s assume you’ve already fetched your albums and songs arrays. Here’s how to wire up the click handler to filter songs properly:

Step 1: Render Albums with Unique IDs #

First, when you render each album item, attach its unique albumId to the element (using a data-* attribute):

// Sample album/song data (replace with your actual fetched data)
const albums = [
  { id: 1, name: "Midnights", artist: "Taylor Swift" },
  { id: 2, name: "30", artist: "Adele" }
];

const allSongs = [
  { id: 101, title: "Anti-Hero", albumId: 1 },
  { id: 102, title: "Lavender Haze", albumId: 1 },
  { id: 201, title: "Easy On Me", albumId: 2 }
];

// Render albums to the DOM
function renderAlbums() {
  const albumContainer = document.getElementById("album-list");
  albums.forEach(album => {
    const albumCard = document.createElement("div");
    albumCard.classList.add("album-card");
    albumCard.textContent = `${album.name} by ${album.artist}`;
    // Attach album ID to the element
    albumCard.dataset.albumId = album.id;
    // Add click event listener
    albumCard.addEventListener("click", handleAlbumClick);
    albumContainer.appendChild(albumCard);
  });
}

Step 2: Handle Album Clicks & Filter Songs #

When an album is clicked, grab its ID, filter the songs array, and render only those matches:

function handleAlbumClick(e) {
  const selectedAlbumId = parseInt(e.target.dataset.albumId);
  // Filter songs to only those matching the selected album's ID
  const albumSongs = allSongs.filter(song => song.albumId === selectedAlbumId);
  // Update the song list with filtered results
  renderSongs(albumSongs);
}

function renderSongs(songs) {
  const songContainer = document.getElementById("song-list");
  // Clear previous songs first
  songContainer.innerHTML = "";
  
  if (songs.length === 0) {
    songContainer.textContent = "No songs found for this album.";
    return;
  }

  songs.forEach(song => {
    const songItem = document.createElement("div");
    songItem.classList.add("song-item");
    songItem.textContent = song.title;
    songContainer.appendChild(songItem);
  });
}

// Initialize the library
renderAlbums();

Solution 2: React Implementation #

If you’re using React, the approach is similar but leverages state to track the selected album:

import { useState } from "react";

function MusicLibrary() {
  // Sample data (replace with your fetched data)
  const albums = [
    { id: 1, name: "Midnights", artist: "Taylor Swift" },
    { id: 2, name: "30", artist: "Adele" }
  ];

  const allSongs = [
    { id: 101, title: "Anti-Hero", albumId: 1 },
    { id: 102, title: "Lavender Haze", albumId: 1 },
    { id: 201, title: "Easy On Me", albumId: 2 }
  ];

  // State to track the selected album ID
  const [selectedAlbumId, setSelectedAlbumId] = useState(null);

  // Filter songs based on selected album
  const filteredSongs = selectedAlbumId
    ? allSongs.filter(song => song.albumId === selectedAlbumId)
    : [];

  return (
    <div className="library-container">
      <div className="album-section">
        <h2>Albums</h2>
        {albums.map(album => (
          <div
            key={album.id}
            className={`album-card ${selectedAlbumId === album.id ? "active" : ""}`}
            onClick={() => setSelectedAlbumId(album.id)}
          >
            {album.name} - {album.artist}
          </div>
        ))}
      </div>

      <div className="song-section">
        <h2>Songs</h2>
        {filteredSongs.length > 0 ? (
          filteredSongs.map(song => (
            <div key={song.id} className="song-item">
              {song.title}
            </div>
          ))
        ) : (
          <p>Select an album to view its songs</p>
        )}
      </div>
    </div>
  );
}

export default MusicLibrary;

Key Checks to Ensure It Works #

• Make sure your songs array includes an albumId (or matching key) that links each song to its album. If your data doesn’t have this, you’ll need to adjust your fetch logic to include it (either from your backend or by mapping it when fetching).
• Double-check that the albumId values match exactly between albums and songs (no typos, mismatched number types—e.g., string vs integer).
• If you’re fetching songs from an API on click, modify your fetch call to include the albumId as a query parameter (e.g., fetch(/api/songs?albumId=${selectedAlbumId}) instead of fetching all songs every time).

内容的提问来源于stack exchange，提问作者devesh kumawat