javascript - 功能组件未呈现
问题描述
我正在尝试显示歌曲,但由于某种原因,我的歌曲组件甚至没有被执行。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;
解决方案
您没有返回地图内的任何内容
{recently_played?.tracks.items.map(item => {
return <Songs track={item.track} />;
})}
[或] 使用箭头函数的简写版本
{recently_played?.tracks.items.map(item => <Songs track={item.track} />)}
推荐阅读
- javascript - JS文件不会让我有两个以上的变量
- list - 如何将二进制 0 到 1 数字的列表转换 PROLOG
- python-3.x - 用 scipy 进行数值求解
- .net - VB.NET,如何更改 Web 浏览器控件的用户代理
- python - TinyMCE HTMLField 和 Django TextField 没有出现在生产环境中
- python - configparser.MissingSectionHeaderError:文件不包含节标题。Reddit 机器人
- java - 如何将此模式存储在 Java 数组列表中?
- discord.js - 我如何获得 guild.id
- python - 在 Python 中使用 ANTLR4 解析数学表达式
- php - 满足特定条件时如何停止 webhook 执行?