React Native 中的“NSCFBoolean objectForKeyedSubscript:]：无法识别的选择器发送到实例”答案

【问题标题】："NSCFBoolean objectForKeyedSubscript:]: unrecognized selector sent to instance" in React NativeReact Native 中的“NSCFBoolean objectForKeyedSubscript:]：无法识别的选择器发送到实例”
【发布时间】：2021-03-29 13:58:34
【问题描述】：

我将 React Native 与 Expo 一起使用，这原本是一个基于类的组件，但我将其转换为函数式组件，因为我想使用钩子。现在它正在引发屏幕截图中显示的错误。我不确定如何处理该错误？我已经看到另一篇关于此的帖子，但有点失落（我正在练习反应）。该组件基本上是一个带标记的 GPS！谢谢

import { View, Text, Animated, StyleSheet } from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
import React, { Component, useState } from "react";
import { MaterialCommunityIcons } from "react-native-vector-icons";

const LATITUDE = 18.7934829;
const LONGITUDE = 98.9867401;
const LATITUDE_DELTA = 0.009;
const LONGITUDE_DELTA = 0.009;

export default function MapLocation() {
  const [location, setLocation] = useState({
    isLoading: true,
    latitude: LATITUDE,
    longitude: LONGITUDE,
    error: null,
  });

  var getMapRegion = () => ({
    latitude: location.latitude,
    longitude: location.longitude,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  });

  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log(position);
      setLocation({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        error: null,
      });
    },
    (error) => setLocation({ error: error.message }),
    { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 }
  );

  navigator.geolocation.watchPosition((position) => {
    const { latitude, longitude } = position.coords;
    setLocation({ latitude, longitude });
  });

  const { isLoading } = location;

  return (
    <View style={{ flex: 1 }}>
      <MapView
        style={{ flex: 1 }}
        provider={PROVIDER_GOOGLE}
        region={getMapRegion}
        showsUserLocation={true}
        showsMyLocationButton={true}
      >
        <Marker coordinate={getMapRegion}>
          <MaterialCommunityIcons name="egg" color={"white"} size={35} style={styles.shadow} />
        </Marker>

        <Marker
          coordinate={{ latitude: 34.0198536, longitude: -80.923467 }}
          pinColor="maroon"
          title={"title"}
          description={"description"}
        >
          <MaterialCommunityIcons name="school" color={"maroon"} size={40} style={styles.shadow} />
        </Marker>
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  shadow: {
    // transform: [{ rotateZ: "10deg" }],
    shadowColor: "black",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 3,
  },
});

【问题讨论】：

我注意到“const { isLoading } = location;”从不读取加载。不确定是否相关。
我也应该使用 useEffect 可能。

标签： react-native exception compiler-errors expo use-state

【解决方案1】：

我在使用 useState 和 useEffect 转换为钩子时遇到了几个问题。我通过本指南解决了这两个问题，关于将类转换为函数。我没有使用“useEffect hook”代替组件确实挂载，我也没有在 useEffect hook 末尾有一个空数组，这使得它根据我的理解不断重新渲染。

Link to functional component conversion steps

【讨论】：