undefined is not a function-Undefined is not a Function/React Native

Asked

Viewed 827 times

-1

I’m having a problem, I’m taking a course and is giving this error in React Active, I’ll show you all the code below, can anyone help? I searched about but found no answer That is the mistake:

[Unhandled promise rejection: TypeError: undefined is not a function (near '...setCurrentRegion...')]
* src\pages\Main.js:11:8 in loadInitialPosition
- node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch
- node_modules\regenerator-runtime\runtime.js:271:30 in invoke
- node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch
- node_modules\regenerator-runtime\runtime.js:135:28 in invoke
- node_modules\regenerator-runtime\runtime.js:145:19 in Promise.resolve.then$argument_0
- node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

Main.js

import React,{useState,useEffect} from 'react';
import { StyleSheet } from 'react-native';
import MapView from 'react-native-maps';
import { requestPermissionsAsync, getCurrentPositionAsync} from 'expo-location'


function Main() {
    const { currentRegion, setCurrentRegion } = useState(null);

    useEffect(() => {
        async function loadInitialPosition() {
            const {granted} = await requestPermissionsAsync();

            if(granted) {
                const {coords} = await getCurrentPositionAsync({
                    enableHighAccuracy: true,
                });
                const { latitude, longitude } = coords

                setCurrentRegion({
                    latitude,
                    longitude,
                    latitudeDelta: 0.04,
                    longitudeDelta: 0.04,
                })
            }
        }

    loadInitialPosition();    
    }, [])

    if(!currentRegion){
        return null;
    }
    return <MapView initialRegion={currentRegion} style={{ flex: 1 }}/>
}


const style = StyleSheet.create({
    map: {
        flex: 1,
    },
})

export default Main;

App.js

import React from 'react';
import { StatusBar } from 'react-native';
import Routes from './src/pages/routes';

export default function App() {
  return (
    <>
    <StatusBar barStyle="light-content" backgroundColor='#7D47E0'/>
    <Routes/>
    </>
  );

package

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.6",
    "expo": "~36.0.0",
    "expo-location": "~8.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-maps": "0.26.1",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^2.0.15"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "babel-preset-expo": "~8.0.0"
  },
  "private": true
}

Profile

import React from 'react';
import { View } from 'react-native'

function Profile() {
    return <View/>
}

export default Profile;

Routes.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack'

import Main from './Main';

import Profile from './profile';

const Routes = createAppContainer(
    createStackNavigator({
        Main: {
            screen: Main,
            navigationOptions: {
                title: 'DevRadar',
            }
        },
        Profile: {
            screen: Profile,
            navigationOptions: {
                title: 'Perfil no github',
            }
        },
    }, {
        defaultNavigationOptions : {
            headerTintColor: '#FFF',
            headerStyle: {
                backgroundColor: '#7D40E7'
            }
        },
    })
);

export default Routes;
  • Make the mistake, man

  • I’ll edit and put it on the top

  • You’re not forgetting to import anything on Main.js?

  • 2

    Shouldn’t your useState unstructure an array? You’re trying like an object in its return

  • Bro, it’s the same as the course

  • It’s not the same, try const [currentRegion, setCurrentRegion] = useState(null);, remember that Diego says that the return is an array

  • puts, verdaade uma "{ }", valeu ai was not seeing at all

Show 2 more comments

1 answer

0


Substitute

const { currentRegion, setCurrentRegion } = useState(null)

for:

const [ currentRegion, setCurrentRegion ] = useState(null)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.