Question

我是React Native的初学者（通常是编程人员），目前正在尝试使用Google Maps API的简单位置组件。在尝试获取要用于“地图”视图的位置坐标时，我陷入了以下错误。

TypeError：未定义不是函数（'..._ 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是提供给React的类组件的API的一部分，如果创建类组件并扩展React.Component，则只能使用。您可以找到有关类组件和React.Component here的更多信息。

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

为使代码正常工作，只需将其设置为类组件即可。

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

Answer 2

要在功能组件中包含state，您需要使用Hooks API。实现state以及setState方法的方式是类组件所独有的。请参阅official docs。

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

Answer 3

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

Answer 4

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

Answer 5

要在功能组件中使用状态，必须使用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：未定义不是函数（'..._ this.setState ...'）

5 个答案: