0

我第一次使用谷歌地图 API 并设法最终将地图呈现到屏幕上，我现在正在努力添加我从应用程序中其他地方收到的位置标记。当我遍历这些位置以获取它们各自的纬度和经度坐标时，我想将它们添加到我的状态变量中。目前我有我的代码的方式，我得到一个响应，它被存储在我的状态变量中，但它只存储最近的一个而不是全部。

将所有这些来自 API 的单独响应添加到我的状态变量的最佳方法是什么？

这是我目前的代码

     export const MapRender =(props) => {
    const {logs} = useContext(LogContext)
    const [latLong, setLatLong] = useState([])
    
    useEffect(()=>{
        logs.map(l =>{
            return fetch(`https://api.opencagedata.com/geocode/v1/json?q=${l.location}&key=MYKEY&limit=1`)
                .then(res => res.json())
                .then(parsedRes => setLatLong([parsedRes.results[0].geometry]))
            
            
        })
    },[logs])

console.log(latLong) --- returns a separate log for each response object, I want it to return one array with all responses
4

1 回答 1

0

更新

当我第一次回答时，我没有注意到这一点，因为在每次迭代中设置状态的循环会导致大量渲染排队，这导致最后一个传入的响应占上风。

解决方案是将所有响应存储在一个数组中，当所有响应都完成后，您可以设置状态。 您可能想使用它来了解所有承诺何时完成，然后设置状态。

于 2020-09-23T20:21:38.273 回答