Блог

Я пытаюсь отобразить песни, но по какой-то причине мой компонент песен даже не выполняется. Консоль.оператор log внутри компонента Songs также не регистрируется в консоли. Также никаких ошибок любого рода вообще не обнаружено.

Вот мой основной компонент, из которого я вызываю компонент 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;
  

Вы ничего не возвращаете внутри карты

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

 
  

[или] используйте сокращенную версию функции arrow

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