未呈現功能組件

Question

我正在嘗試顯示歌曲，但由於某種原因，我的歌曲組件甚至沒有被執行。 Songs 組件中的 console.log 語句也沒有記錄到控制台。 也根本沒有檢測到任何類型的錯誤。

這是我的 body 組件，我從中調用 Songs 組件

import './body.css'
import React from 'react'
import Header from './Header'
import { useStateValue } from './StateProvider';
import FavoriteIcon from '@material-ui/icons/Favorite';
import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
import Songs from './Songs.js'

function Body( {spotify}) {
    const [{recently_played},dispatch] = useStateValue();
    return (
        <div className="body">
           <Header spotify={spotify}   />

           <div className="body__info">
               <img src={recently_played?.images[0].url} alt=""/>
               <div className="body__infotext">
                   <strong>PLAYLIST</strong>
                    <h2>On Repeat</h2>
                    <p>{recently_played?.description}</p>
               </div>
           </div>
           <div className="body__songs">
               <div className="body__icons">
                   <PlayCircleFilledIcon className="body__shuffle"/>
                   <FavoriteIcon fontSize="large"/>
                   <MoreHorizIcon />
               </div>

               {recently_played?.tracks.items.map(item=>{
                   
                   <Songs track={item.track} />
                  
               })}
           </div>

        </div>
    )
}

export default Body

這是歌曲組件

import React from "react";
import './SongRow.css'

function Songs({ track }) {
  console.log(track);
  return (
    <div className="songRow" >
      <img className="songRow__album" src={track.album.images[0].url} alt="" />
      <div className="songRow__info">
        <h1>{track.name}</h1>
        <p>
          {track.artists.map((artist) => artist.name).join(", ")} -{" "}
          {track.album.name}
        </p>
      </div>
    </div>
  );
}

export default Songs;

Answer 1

你沒有在地圖內返回任何東西

   {recently_played?.tracks.items.map(item => {
          return <Songs track={item.track} />;
       })}

 

[或] 使用箭頭函數的簡寫版本

   {recently_played?.tracks.items.map(item => <Songs track={item.track} />)}