我的组件是beign渲染空白在结束一切都很好的api调用,我添加了一些console. log()调试,谁能给我一个提示?
基本上,我希望从具有以下JSON结构的api中检索数据
[
{
"trackName": "Beira de Piscina (Remix)",
"trackUri": "spotify:track:6a0kQTjyGmfwBF0tLVgEha",
"artistImage": "https://i.scdn.co/image/ab67616d0000b27366127aa6c868a01e97f62d64"
},
{
"trackName": "Beira de Piscina",
"trackUri": "spotify:track:25XUxLporfgzl2rf2mtgmj",
"artistImage": "https://i.scdn.co/image/ab67616d0000b2738e2cc04d7c1ed2beb3216ff2"
}
]
我想在一个页面上呈现这些,这是一个示例代码,但我不明白为什么我得到一个空白页面:(
这是我的准则
import {useState} from "react";
export default function SearchTracks() {
const [formSuccess, setFormSuccess] = useState(false)
const [trackList, setTracklist] = useState()
const handleSubmit = async (event: any) => {
event.preventDefault()
const data = {
trackName: event.target.trackName.value
}
const endpoint = `http://myEndPoint:8080/tracks?trackName=${data.trackName}`
const options = {
method: 'GET',
headers: {
'access-token': 'MyAccessToken'
}
}
const response = await fetch(endpoint, options)
const result = await response.json()
setFormSuccess(true)
setTracklist(result)
};
const renderTrack = (trackListResponse) : any => {
const myMap = new Map(Object.entries(trackListResponse))
return myMap.forEach((trackValue) => {
return trackValue.map(track => {
let value = buildTrackContainer(track)
console.log(value)
return value
})
})
}
const buildTrackContainer = (track) => {
console.log("Building track: " + track.trackName)
return <li key={track.trackUri}>
<p>{track.trackName}</p>
<p>{track.trackUri}</p>
<img src={track.artistImage}/>
</li>
}
return (
<div>
{formSuccess ?
<ul>
{ renderTrack({trackList}) }
</ul>
:
<form onSubmit={handleSubmit}>
<label htmlFor="trackName">Track Name</label>
<input type="text" id="trackName" name="trackName" required/>
<button type="submit">Submit</button>
</form>
}
</div>
)
}
在控制台中,我可以看到react元素在函数中返回
My Console Logs
Result Page
1条答案
按热度按时间5tmbdcev1#
问题出在您的
renderTrack()
函数中。请尝试以下操作:问题是
forEach
实际上并不返回任何东西,所以它得到的只是undefined
。另一种方法是创建一个空数组,这将在forEach
调用中将元素推入空数组,但这感觉可能比它的价值更麻烦。例如: