从 API 获取数据后如何在数组中渲染单个对象？答案

【问题标题】：How to render individual object within array after fetching data from API?从 API 获取数据后如何在数组中渲染单个对象？
【发布时间】：2021-07-17 16:46:44
【问题描述】：

我正在尝试从我生成的 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)
                }
            )
    }, [])

理想情况下，我希望能够在谷歌地图等界面上呈现为标记。

【问题讨论】：

标签： javascript arrays reactjs google-maps react-hooks

【解决方案1】：

您甚至不尝试渲染代码。它最后需要一个return(...)，你把你的html放在里面。你应该做setDrivers(data)，否则你进入一层太深（甚至不存在）。您的回报可能看起来像这样：

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

【讨论】：