javascript - 类型错误 : undefined is not a function ('..._this.setState...' )

Question

我是 React Native(和一般编程)的初学者，目前正在尝试使用谷歌地图 API 的简单定位组件。当我尝试获取要用于 map View 的位置坐标时，我遇到了以下错误。

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

setState 是 API 的一部分提供给 React 的类组件，并且仅可以在您创建类组件并扩展 React.Component 时使用。您可以找到有关类组件和 React.Component 的更多信息 here .

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

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

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钩子(Hook):

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