当变量发生变化时反应原生调用 useEffect答案

【问题标题】：React native call useEffect when variable has changed当变量发生变化时反应原生调用 useEffect
【发布时间】：2021-09-28 03:37:54
【问题描述】：

我有两个组件 Place 和 Map。每次当组件Place 中的用户单击“在地图上显示”按钮时，我打开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>
)

【问题讨论】：

标签： react-native use-effect use-state

【解决方案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 将是新值

【讨论】：

我不能这样做，因为想象用户打开地图然后关闭（组件没有卸载）并且当用户再次按下按钮并打开地图时它没有重新渲染。这就是为什么我使用 useState 在坐标发生变化时重新渲染的原因。