从API获取数据后，如何渲染数组中的单个对象

Question

我正在尝试从我生成的JSON数组中映射出单个驱动程序。但我似乎无法将其映射到列表或任何东西中。

JSON:

[{"driver_id":"0-ikkpyhyjg9","location":{"latitude":null,"longitude":null,"bearing":229}},{"driver_id":"1-fk8jgaw8m7m","location":{"latitude":null,"longitude":null,"bearing":306}},{"driver_id":"2-w93e6x4hj7n","location":{"latitude":null,"longitude":null,"bearing":353}}]

反作用挂钩：

useEffect(() => {
fetch('/api/drivers', {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Origin: 'http://localhost:3000',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST',
'Access-Control-Allow-Headers': 'Content-Type'
}
})
.then(response => response.json())
.then(
data => {
setIsLoading(true)
setDrivers(data.drivers)
console.log(data.drivers)
},
error => {
setIsLoading(true)
setError(error)
console.log(error.message)
}
)
}, [])

理想情况下，我希望能够在谷歌地图这样的界面上作为标记进行渲染。

Answer 1

您甚至不会尝试呈现代码。它需要在末尾有一个return(...)，您可以在其中放入html。你应该做setDrivers(data)，因为否则你会进入一层太深(甚至不存在(。您的退货可能看起来像这样：

return (
<div>
{ drivers.map((driver) =>
<h2>{driver.driver_id}</h2>
{/* And whatever else you want to show */}
}
</div>
)