我已经从Spotify API获取了数据，它显示在控制台中，但当我试图返回数据时，它说map没有定义，我使用useState([])并将其传递给数组，如果我说的方式正确：
const [track, setTrack] = useState([])
const getRecommendation = async (e) => {
e.preventDefault()
const {data} = await axios.get("https://api.spotify.com/v1/recommendations", {
headers: {
Authorization: `Bearer ${token}`
},
params: {
limit: '10',
seed_artists: '4NHQUGzhtTLFvgF5SZesLK',
seed_genres: 'rock,pop,metal',
seed_tracks: '0c6xIDDpzE81m2q797ordA'
}
})
setTrack(data.tracks.item)
console.log(data);
}
const renderTracks = () => {
return track.map(tracks => {
return (
<h1 className='track-name'>
{tracks.name}
</h1>
)
})
}字符串
在console中：
的数据
有什么建议吗
1条答案
按热度按时间c2e8gylq1#
据此：
字符串
data对象有一个名为tracks的属性，它是一个数组。也就是说型
正在将状态设置为
undefined，因为数组上没有.item属性。这意味着你需要迭代一个数组：
型
因此，将state设置为数组，而不是您期望在数组上的某个属性：
型
顺便说一句，你们名字中的多数是“倒退”的。这会让你感到困惑（如果还没有的话）。考虑一下这个的语义：
型
在这行代码中，
track是一个数组，tracks是一个对象。多元化不是这样运作的。重命名您的变量以准确反映它们包含的内容：型
以及：
型
以及：
型
这很可能是首先导致问题的原因，因为
setTrack意味着它需要一个 * 单一对象 *，而data.tracks是一个 * 数组 *。保持变量名的一致性和有意义，你的代码将更容易阅读和理解。