Reactjs 如何在一个组件中处理多个不同的状态更新？

我正在使用

react native maps

和

expo location

构建一个移动地图应用程序

该应用程序每隔一秒钟读取一次用户的手机位置，从用户位置附近商店的服务器获取信息，并根据服务器的响应显示带有标记的地图。 当它检测到按下标记时，会在模式中打开带有标记数据的工具提示

问题：单击标记时，会更新Home.js中的TooltipData状态，以便将其发送到Tooltip.js组件子级。 因为我每秒钟从服务器获取一次数据并更新Home.js中的状态，当用户按下一个标记，Home.js状态更新为stores时，应用程序会中断，因为同时发生两次状态更新

我在我的应用程序中使用了redux，所以我想我可以将TooltipData存储在redux存储中

home.js

其中所有内容都以中心为中心：

import React，{useState，useffect}来自“React”；
从“react native”导入{StyleSheet}
从“../../components/maps”导入{Map、OfflineMap、工具提示、ServiceProviderMarker}；
从“@世博/矢量图标”导入{基金}；
从“../../hooks”导入{useLocation}
从“../../api/wrappers/locationService”导入{getServiceProviders}
从“../../config”导入{locationConfig}；
const Home=（道具）=>{
常量[{coords}，err]=useLocation（true）
const[serviceProviders，setServiceProviders]=useState（[]）
常量[isLocation，setIsLocation]=useState（false）
常量[toolTipData，setToolTipData]=useState({
数据：{}，
I：错，
})
useffect（（）=>{
如果（！coords | | err）{
setIsLocation（错误）
}否则{
setIsLocation（真）
getServiceProviders({
纬度：坐标，纬度，
经度：坐标，经度，
半径：locationConfig.Radius，
MeasureUnit:locationConfig.MeasureUnit（0）
})
。然后（（res）=>setServiceProviders（res））
.catch（（err）=>console.log（err））；
}
}[coords，呃]；
const handleToolTip=（可视性，数据={}）=>{
setToolTipData（prevState=>（{…prevState，isActive:Visibility，data:{…data}}））
}
返回(
孤岛定位
?
handleToolTip（可视性、数据）}
/>
setToolTipData（{…toolTipData，isActive:false}）
/>
:
);
};
Home.navigationOptions={
标题：“查找”，
塔巴瑞康：，
};
const styles=StyleSheet.create({
地图：{
弹性：1
}
})
导出默认主页；

Map.js

从“React”导入React；
从“react native”导入{StyleSheet}；
从“react native maps”导入地图视图，{Circle，Marker}
从“../../config”导入{locationConfig}
常量映射=（{子对象，位置}）=>{
返回(
{儿童}
);
};
const styles=StyleSheet.create({
地图：{
弹性：1，
},
});
导出默认地图；

ServiceproviderMarker.js

从“React”导入React
从“反应本机映射”导入{Marker}
const ServiceProviderMarker=（{serviceProviders，ontoltip}）=>{
返回(
serviceProviders.map（（提供者，i）=>(
{
console.log（'标记按下'）
onToolTip（正确{
职业：provider.profession，
标题：provider.title，
firstName:provider.firstName，
lastName:provider.lastName，
description:provider.description，
评级：provider.rating
})            
}}
/>
))
)
}
导出默认ServiceProviderMarker

Tooltip.js

显示每个商店的标记：

从“React”导入React
从“react native”导入{样式表、视图、图像}
从“@ui kitten/components”导入{Modal，Text，Button}
常量工具提示=（{可见，providerData，hideToolTip}）=>{
如果（！providerData | | providerData==={}）{
返回(
很抱歉，没有此提供程序的数据
)
}
返回(
{providerData.firstName}{providerData.lastName}
隐藏
)
}
const styles=StyleSheet.create({
型号：{
高度：'60%'，
宽度：'80%'，
辩护内容：'中心'，
对齐项目：'中心'，
背景颜色：'红色'，
边框宽度：3
},
背景样式：{
背景颜色：'rgba（0,0,0,0.6）'
}
})
导出默认工具提示

为了获取用户位置，我使用了一个自定义钩子

useLocation.js

：

从“react”导入{useState，useffect}；
进口{
精确
requestPermissionsAsync，
watchPositionAsync，
}从“世博会地点”；
从“../config”导入{locationConfig}
常量shallewequalocation=（object1，object2）=>{
常量keys1=Object.keys（object1）；
const keys2=Object.keys（object2）；
if（keys1.length！==keys2.length）{
返回false；
}
for（让键1中的键）{
if（object1[key]！==object2[key]）{
返回false；
}
}
返回true；
}
const useLocation=（shouldTrack）=>{
const[err，setErr]=useState（null）；
const[location，setLocation]=useState（{}）
const watchposition选项={
准确度：准确度。最佳导航，
timeInterval:locationConfig.getLocationInterval，
distanceInterval:locationConfig.getDistanceInterval，
}
useffect（（）=>{
出租订户；
常量startWatching=async（）=>{
试一试{
const{grated}=wait requestPermissionsAsync（）；
如果（！授予）{
抛出新错误（“未授予位置权限”）；
}
订户=等待watchPositionAsync(
监视位置选项，
（newLocation）=>{setLocation（newLocation）}
);
}捕获（e）{
塞特尔（e）；
}
};
如果（应跟踪）{