React map不打印html数据

Question

我试图输出一些JSON数据作为通过GET请求到达的div。数据按预期到达，并且useEffect函数在控制台中很好地打印它。但是什么也没有展示。下面是代码，如果有人知道它是如何工作的。

let Search = () => {
axios.request(options).then(function (response) {
console.log(response.data);
setTracks(response.data.tracks.hits);
}).catch(function (error) {
console.error(error);
});
}
useEffect(() => {
tracks.forEach(element => {
console.log(element);
});
},[tracks]);
return (
<>
<input onChange={Event => {setTekstPretrage(Event.target.value)}} value={tekstPretrage}></input>
<button onClick={Search}>Search</button>
<div className='output'>
{tracks.length > 0 && tracks.map(track => {
<Track songName={track.title} artistName={track.subtitle} coverUrl=''></Track>
})}
</div>
</>
);

Answer 1

如果您添加{}，则需要return用于箭头功能:

{tracks.length > 0 && tracks.map(track => {
return <Track songName={track.title} artistName={track.subtitle} coverUrl=''></Track>
})}

或隐式返回(没有{}):

{tracks.length > 0 && tracks.map(track =>
<Track songName={track.title} artistName={track.subtitle} coverUrl=''></Track>
)}