如何解决尝试通过多个API调用响应推送到状态变量
我是第一次使用google maps 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
解决方法
已更新
当我第一次回答时,我并没有意识到这一点,因为具有在每次迭代中设置状态的循环会导致很多渲染排队,从而导致最后的重新渲染成为主流。
解决方案是将所有响应存储在一个数组中,当所有响应完成时,您可以设置状态。 You may want to use this知道何时所有承诺都已完成,然后设置状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。