javascript - 功能组件未被渲染

Question

我正在尝试显示歌曲，但出于某种原因，我的歌曲组件甚至没有被执行。 Songs 组件内的 console.log 语句也没有记录到控制台。也没有检测到任何类型的错误。

这是我调用 Songs 组件的 body 组件

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

你没有返回 map 内的任何东西

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

 

[或]使用箭头函数的简写版本

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