设置尝试后无法设置对象状态 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 => {&nbsp; const availableVenues = useSelector(state => state.cafes.availableVenues);&nbsp; const [isLocation, setLocation] = useState(null);&nbsp; const [mapRegion, setMapRegion] = useState({&nbsp; &nbsp; region: {&nbsp; &nbsp; &nbsp; latitude: -37.813629,&nbsp; &nbsp; &nbsp; longitude: 144.963058,&nbsp; &nbsp; &nbsp; latitudeDelta: 0.0922,&nbsp; &nbsp; &nbsp; longitudeDelta: 0.0421&nbsp; &nbsp; }&nbsp; });&nbsp; const selectItemHandler = (id, title) => {&nbsp; &nbsp; props.navigation.navigate("VenueDetail", {&nbsp; &nbsp; &nbsp; venueId: id,&nbsp; &nbsp; &nbsp; venueTitle: title&nbsp; &nbsp; });&nbsp; };&nbsp; useEffect(() => {&nbsp; &nbsp; if (Platform.OS === "android" && !Constants.isDevice) {&nbsp; &nbsp; &nbsp; Alert.alert(&nbsp; &nbsp; &nbsp; &nbsp; "Error",&nbsp; &nbsp; &nbsp; &nbsp; "Oops, this will not work on Sketch in an Android emulator. Try it on your device!",&nbsp; &nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: "Okay"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; this._getLocationAsync();&nbsp; &nbsp; }&nbsp; }, []);&nbsp; _getLocationAsync = async () => {&nbsp; &nbsp; let { status } = await Permissions.askAsync(Permissions.LOCATION);&nbsp; &nbsp; if (status !== "granted") {&nbsp; &nbsp; &nbsp; Alert.alert(&nbsp; &nbsp; &nbsp; &nbsp; "Insufficient Permissions",&nbsp; &nbsp; &nbsp; &nbsp; "Sorry, we need location permissions to make this work!",&nbsp; &nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: "Okay"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; &nbsp; let location = await Location.getCurrentPositionAsync({});&nbsp; &nbsp; setLocation({ location });&nbsp; &nbsp; setMapRegion({&nbsp; &nbsp; &nbsp; region: {&nbsp; &nbsp; &nbsp; &nbsp; latitude: location.coords.latitude,&nbsp; &nbsp; &nbsp; &nbsp; longitude: location.coords.longitude,&nbsp; &nbsp; &nbsp; &nbsp; latitudeDelta: 0.0922,&nbsp; &nbsp; &nbsp; &nbsp; longitudeDelta: 0.0421&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; console.log(mapRegion);&nbsp; };&nbsp; return (&nbsp; &nbsp; <MapView&nbsp; &nbsp; &nbsp; style={styles.map}&nbsp; &nbsp; &nbsp; showsUserLocation={true}&nbsp; &nbsp; &nbsp; initialRegion={mapRegion.region}&nbsp; &nbsp; &nbsp; region={mapRegion.region}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {availableVenues.map(marker => (&nbsp; &nbsp; &nbsp; &nbsp; <Marker&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={marker.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; coordinate={{ latitude: marker.lat, longitude: marker.lng }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title={marker.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description={marker.address}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPress={() => { //Need to change to press popup&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectItemHandler(marker.id, marker.title);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 5000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </MapView>&nbsp; );};MapScreen.navigationOptions = {&nbsp; headerTitle: "Venue Map"};const styles = StyleSheet.create({&nbsp; map: {&nbsp; &nbsp; flex: 1,&nbsp; &nbsp; justifyContent: "center",&nbsp; &nbsp; alignItems: "center"&nbsp; },&nbsp; container: {&nbsp; &nbsp; flex: 1,&nbsp; &nbsp; alignItems: "center",&nbsp; &nbsp; justifyContent: "center",&nbsp; &nbsp; paddingTop: Constants.statusBarHeight,&nbsp; &nbsp; backgroundColor: "#ecf0f1"&nbsp; },&nbsp; paragraph: {&nbsp; &nbsp; margin: 24,&nbsp; &nbsp; fontSize: 18,&nbsp; &nbsp; textAlign: "center",&nbsp; &nbsp; color: "black"&nbsp; }});export default MapScreen;