设置尝试后无法设置对象状态 useState 反应本机地图

Question

我似乎无法使用 useState 钩子设置值，正如您在 pickLocation 输出中看到的那样。当我控制 pickLocation 时，我得到了初始值。即使设置了初始值，我的地图也没有显示。在 IOS 上，根据我的 isFetching 状态，我的消息是“尚未选择地图”，而 android 则存在不同的地图错误Error using newLatLngBounds(...我在这里尝试了答案：https : //stackoverflow.com/a/54069332/2277245 使用 useEffect 和 spread 运算符，但它们也不起作用。有人帮忙吗？谢谢

Answer 1

我通过复制和改编来自官方世博会文档https://docs.expo.io/versions/v35.0.0/sdk/location/的示例解决了这个问题

import React, { useState, useEffect } from "react";

import { StyleSheet, Platform } from "react-native";

import { useSelector } from "react-redux";

import MapView, { Marker } from "react-native-maps";

import Constants from "expo-constants";

import * as Location from "expo-location";

import * as Permissions from "expo-permissions";

const MapScreen = props => {

  const availableVenues = useSelector(state => state.cafes.availableVenues);

  const [isLocation, setLocation] = useState(null);

  const [mapRegion, setMapRegion] = useState({

    region: {

      latitude: -37.813629,

      longitude: 144.963058,

      latitudeDelta: 0.0922,

      longitudeDelta: 0.0421

    }

  });

  const selectItemHandler = (id, title) => {

    props.navigation.navigate("VenueDetail", {

      venueId: id,

      venueTitle: title

    });

  };

  useEffect(() => {

    if (Platform.OS === "android" && !Constants.isDevice) {

      Alert.alert(

        "Error",

        "Oops, this will not work on Sketch in an Android emulator. Try it on your device!",

        [

          {

            text: "Okay"

          }

        ]

      );

    } else {

      this._getLocationAsync();

    }

  }, []);

  _getLocationAsync = async () => {

    let { status } = await Permissions.askAsync(Permissions.LOCATION);

    if (status !== "granted") {

      Alert.alert(

        "Insufficient Permissions",

        "Sorry, we need location permissions to make this work!",

        [

          {

            text: "Okay"

          }

        ]

      );

    }

    let location = await Location.getCurrentPositionAsync({});

    setLocation({ location });

    setMapRegion({

      region: {

        latitude: location.coords.latitude,

        longitude: location.coords.longitude,

        latitudeDelta: 0.0922,

        longitudeDelta: 0.0421

      }

    });

    console.log(mapRegion);

  };

  return (

    <MapView

      style={styles.map}

      showsUserLocation={true}

      initialRegion={mapRegion.region}

      region={mapRegion.region}

    >

      {availableVenues.map(marker => (

        <Marker

          key={marker.id}

          coordinate={{ latitude: marker.lat, longitude: marker.lng }}

          title={marker.title}

          description={marker.address}

          onPress={() => { //Need to change to press popup

            setTimeout(() => {

              selectItemHandler(marker.id, marker.title);

            }, 5000);

          }}

        />

      ))}

    </MapView>

  );

};

MapScreen.navigationOptions = {

  headerTitle: "Venue Map"

};

const styles = StyleSheet.create({

  map: {

    flex: 1,

    justifyContent: "center",

    alignItems: "center"

  },

  container: {

    flex: 1,

    alignItems: "center",

    justifyContent: "center",

    paddingTop: Constants.statusBarHeight,

    backgroundColor: "#ecf0f1"

  },

  paragraph: {

    margin: 24,

    fontSize: 18,

    textAlign: "center",

    color: "black"

  }

});

export default MapScreen;