TypeError: undefined is not a function ('..._this.setState...')

Question

我是 React Native（和一般编程）的初学者，目前正在尝试使用 google 地图 API 的简单定位组件。当我试图获取要与地图视图一起使用的位置坐标时，我遇到了以下错误。

TypeError: undefined is not a function ('..._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',
  },
});

如果能帮助我发现问题，我们将不胜感激。

Answer 1

为了在函数组件中包含 state，您需要使用 Hooks API. The way you implemented state and also the setState method is exclusive to class components. Please refer to the official docs。

在相关说明中，this 关键字也永远不会在函数组件中起作用。

Answer 2

.setState 仅适用于基于 class 的组件。您的组件是功能性的。查看 React Hooks，特别是 useState 钩子以了解如何在功能组件中拥有状态。

Answer 3

你需要使用 useState React hook，在这种情况下定义你的状态将是这样的： [userLocation, setUserLocation] = useState(null) 然后设置你的状态，你需要像这样使用 setUserLocation setUserLocation({new location object})

Answer 4

setState 是 API provided to react's class components, and can be used only if you create a class component and extend React.Component. You can find out more about class components and React.Component here.

的一部分

也就是说，如果您使用的 React 版本 > 16.8，我强烈建议您查看 react hooks，因为它们提供了使用状态的能力，而无需创建 class组件。

为了让您的代码正常工作，您只需将其设为 class 组件：

import React, { Component } from 'react';
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 class App extends Component {
  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
        }
      })

    });
  }

  render() {
    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',
  },
});

或使用 useState 挂钩：

import React, { useState } from 'react';
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() {
  const [userLocation, setUserLocation] = useState(null);

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

    });
  }

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

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

TypeError: undefined is not a function ('..._this.setState...')

TypeError: undefined is not a function ('..._this.setState...')

javascript

reactjs

react-native

react-native-ios