Javascript TypeError:undefined不是一个函数（“…\u this.setState…”）

我是React Native和编程的初学者，目前正在尝试使用GoogleMapsAPI开发一个简单的位置组件。当我试图获取地图视图使用的位置坐标时，我遇到了以下错误

TypeError:undefined不是函数“…\u this.setState…”

我的代码：

import Geolocation from '@react-native-community/geolocation';
import { StyleSheet, Text, View } from 'react-native';
import FetchLocation from './components/FetchLocation';
import UsersMap from './components/UsersMap';

export default function App() {
  state = {
    userLocation: null
  }

  getUserLocationHandler=()=> {
    console.log('Pressed the button');
    Geolocation.getCurrentPosition(position =>{
      console.log(position);
      this.setState({
        userLocation:{
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          latitudeDelta: 0.2922,
          longitudeDelta: 0.2421
        }
      })

    });
  }

  return (
    <View style={styles.container}>
      <FetchLocation onGetLocation={this.getUserLocationHandler}/>
      <UsersMap userLocation={this.state.userLocation}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

如果您有任何想法可以帮助我发现这个问题，我们将不胜感激。

为了在功能组件中具有状态，您需要使用。实现state和setState方法的方式是类组件独有的。请参阅

与此相关的一点是，this关键字在函数组件中也永远不会起作用。

为了在函数组件中具有状态，您需要使用。实现state和setState方法的方式是类组件独有的。请参阅

---

另一方面，this关键字也永远不会在函数组件中工作。

.setState仅适用于基于类的组件。您的组件功能正常。查看React钩子，特别是使用state钩子来了解如何在功能组件中拥有状态。

。setState仅用于基于类的组件。您的组件功能正常。查看React钩子，特别是useState钩子，了解如何在功能组件中拥有状态。

您需要使用useState React钩子，在这种情况下，定义您的状态如下： [userLocation，setUserLocation]=useStatenull 然后要设置您的状态，您需要像这样使用setUserLocation

---

setUserLocation{new location object}

您需要使用useState React hook，在这种情况下，定义您的状态如下： [userLocation，setUserLocation]=useStatenull 然后要设置您的状态，您需要像这样使用setUserLocation setUserLocation{new location object}

setState是提供给react的类组件的一部分，仅当创建类组件并扩展react.component时才能使用。您可以了解有关类组件和React.Component的更多信息

也就是说，如果您使用的是react version>16.8，我强烈建议您查看一下，因为它们提供了使用状态的能力，而无需创建类组件

要使代码正常工作，只需将其设置为类组件：

从“React”导入React，{Component}； 从“@react native community/Geolocation”导入地理位置； 从“react native”导入{样式表、文本、视图}； 从“./components/FetchLocation”导入FetchLocation； 从“/components/UsersMap”导入UsersMap； 导出默认类应用程序扩展组件{ 状态={ 用户位置：空 } getUserLocationHandler{ 控制台。日志“按下按钮”； Geolocation.getCurrentPositionposition=>{ 控制台。日志位置； 这是我的国家{ 用户位置：{ 纬度：位置。坐标。纬度， 经度：position.coords.longitude， 纬度德尔塔：0.2922， 纵向德尔塔：0.2421 } } }; } 渲染{ 回来 ; } } const styles=StyleSheet.create{ 容器：{ 弹性：1， 背景颜色：“fff”， 对齐项目：“居中”， 为内容辩护：“中心”， }, }; 或使用useState钩子：

从“React”导入React，{useState}； 从“@react native community/Geolocation”导入地理位置； 从“react native”导入{样式表、文本、视图}； 从“./components/FetchLocation”导入FetchLocation； 从“/components/UsersMap”导入UsersMap； 导出默认功能应用程序{ const[userLocation，setUserLocation]=useStatenull； const getUserLocationHandler==>{ 控制台。日志“按下按钮”； Geolocation.getCurrentPositionposition=>{ 控制台。日志位置； setUserLocation{ 纬度：位置。坐标。纬度， 经度：position.coords.longitude， 纬度德尔塔：0.2922， 纵向德尔塔：0.2421 } }; } 回来 ; } const styles=StyleSheet.create{ 容器：{ 弹性：1， 背景颜色：“fff”， 对齐项目：“居中”， 为内容辩护：“中心”， }, }; setState是提供给react的类组件的一部分，只有在创建类组件并扩展react.component时才能使用。您可以了解有关类组件和React.Component的更多信息

也就是说，如果您使用的是react version>16.8，我强烈建议您查看一下，因为它们提供了使用状态的能力，而无需创建类组件

要使代码正常工作，只需将其设置为类组件：

从“React”导入React，{Component}； 从“@react native community/Geolocation”导入地理位置； 从“react native”导入{样式表、文本、视图}； 从“./components/FetchLocation”导入FetchLocation； 进口 来自“./components/UsersMap”的UsersMap； 导出默认类应用程序扩展组件{ 状态={ 用户位置：空 } getUserLocationHandler{ 控制台。日志“按下按钮”； Geolocation.getCurrentPositionposition=>{ 控制台。日志位置； 这是我的国家{ 用户位置：{ 纬度：位置。坐标。纬度， 经度：position.coords.longitude， 纬度德尔塔：0.2922， 纵向德尔塔：0.2421 } } }; } 渲染{ 回来 ; } } const styles=StyleSheet.create{ 容器：{ 弹性：1， 背景颜色：“fff”， 对齐项目：“居中”， 为内容辩护：“中心”， }, }; 或使用useState钩子：

从“React”导入React，{useState}； 从“@react native community/Geolocation”导入地理位置； 从“react native”导入{样式表、文本、视图}； 从“./components/FetchLocation”导入FetchLocation； 从“/components/UsersMap”导入UsersMap； 导出默认功能应用程序{ const[userLocation，setUserLocation]=useStatenull； const getUserLocationHandler==>{ 控制台。日志“按下按钮”； Geolocation.getCurrentPositionposition=>{ 控制台。日志位置； setUserLocation{ 纬度：位置。坐标。纬度， 经度：position.coords.longitude， 纬度德尔塔：0.2922， 纵向德尔塔：0.2421 } }; } 回来 ; } const styles=StyleSheet.create{ 容器：{ 弹性：1， 背景颜色：“fff”， 对齐项目：“居中”， 为内容辩护：“中心”， }, };

---

您已经在函数组件中混合了基于类的组件的语法。基于类的组件是用类App extends React.component{/**/}声明的。您在函数组件中混合了基于类的组件的语法。使用类App extends React声明基于类的组件。组件{/**/}onGetLocation={getUserLocationHandler}就足够了，因为它已经是在上面创建的箭头函数。onGetLocation={getUserLocationHandler}就足够了，因为它已经是在上面创建的箭头函数。