React map未渲染HTML数据：数据已获取但页面无显示

你的代码里**tracks.map的回调函数没有返回<Track>组件**，这是页面无内容的核心原因。当使用大括号{}包裹map的回调逻辑时，必须显式使用return返回JSX元素；如果用小括号()，则可以隐式返回。

修正后的代码 #

方法1：显式添加return #

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 => {
            // 显式return组件
            return <Track songName={track.title} artistName={track.subtitle} coverUrl=''></Track>
        })}
    </div>
    </>
);

方法2：使用小括号实现隐式返回 #

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>
    </>
);

额外提示 #

React遍历列表时建议给每个子元素添加唯一的key属性，避免控制台警告并提升渲染性能，比如用数据中track的唯一标识字段（假设存在id）：

<Track 
    key={track.id}
    songName={track.title} 
    artistName={track.subtitle} 
    coverUrl=''
></Track>

内容的提问来源于stack exchange，提问作者aleksandar3