时间戳

首页 > 解决方案 > 从 API 获取数据后如何在数组中渲染单个对象？

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

问题描述

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

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

标签： javascriptarraysreactjsgoogle-mapsreact-hooks

解决方案

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

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

推荐阅读