当变量发生变化时，React本机调用useEffect

Question

我有两个组件Place和Map。每当组件CCD_ 3中的用户点击按钮"时；在地图上显示"；我打开Map，从Place获得路线参数纬度/经度，我想渲染标记附近的区域。我试图将当前的纬度/经度设置为重新发送标记附近组件的状态，但它不起作用，并且我的地图在我关闭它的同一位置打开。我找到的唯一选项是在关闭Map时卸载组件，但我认为这不是最好的解决方案。

地点：

const onNavigationTap = () => {
navigation.navigate('Map', {
destination: data["data"].coordinates
});
}
return(
<TouchableOpacity onPress={() => onNavigationTap()}>
<View style={{flexDirection: "row", alignItems: "center"}}>
<Ionicons size={hp('5%')} name={'navigate-circle-outline'} color='white'/>
</View>
</TouchableOpacity>
)

地图：

const [currentDestination, setCurrentDestination] = useState(undefined);
if (route.params) {
var {destination} = route.params;
}
useEffect(() => {
setCurrentDestination(destination);
}, [destination]);
return (
<MapView

mapType={satellite ? "hybrid" : "standard"}
style={{flex: 1}}
showsUserLocation={true}
followsUserLocation={true}
provider={PROVIDER_GOOGLE}
initialRegion={
currentDestination ?
{
longitude: parseFloat(currentDestination.longitude),
latitude: parseFloat(currentDestination.latitude),
longitudeDelta: 0.0043,
latitudeDelta: 0.0034,
} : {
latitude: 53.227200,
longitude: 50.243698,
latitudeDelta: 3,
longitudeDelta: 3,
}
}
>
</MapView>
)

Answer 1

为什么不直接使用routes.params如下：

<MapView
mapType={satellite ? 'hybrid' : 'standard'}
style={{ flex: 1 }}
showsUserLocation={true}
followsUserLocation={true}
provider={PROVIDER_GOOGLE}
initialRegion={
route.params.destination
? {
longitude: parseFloat(route.params.destination.longitude),
latitude: parseFloat(route.params.destination.latitude),
longitudeDelta: 0.0043,
latitudeDelta: 0.0034,
}
: {
latitude: 53.2272,
longitude: 50.243698,
latitudeDelta: 3,
longitudeDelta: 3,
}
}></MapView>

像这样，每当你调用place时，routes.params都将是新的值