problems with getting coordinates in the react application

Question

I tried the code initially on regular js, everything worked there without problems. When I moved to the react class, I constantly get the error "data.jsx:22 Uncaught TypeError: Unable to read undefined properties (reading 'currentPosition') in data.jsx:22:1". Help, please, I tried everything I could. Here is the class itself:

class Data_item extends React.Component{

constructor(props){
    super(props)
    this.CurrentPosition = [0,0]
    this.state = {
        weather: props
    }
}

data_set;
CurrentPosition;

async firstDo(){
return new Promise((resolve, reject)=>{
        navigator.geolocation.getCurrentPosition(function(position) {
                        this.CurrentPosition[0] = position.coords.latitude;
                        this.CurrentPosition[1] = position.coords.longitude;
                        resolve()
                    })
                })
}

secondDo(){
    return new Promise((resolve,reject)=>{
        fetch(`https://api.open-meteo.com/v1/forecast?latitude=${this.CurrentPosition[0]}&longitude=${this.CurrentPosition[1]}&daily=weathercode,temperature_2m_max,temperature_2m_min,apparent_temperature_max,apparent_temperature_min,sunrise,sunset,precipitation_sum,precipitation_hours,windspeed_10m_max,windgusts_10m_max,winddirection_10m_dominant,shortwave_radiation_sum,et0_fao_evapotranspiration&timezone=Europe%2FMoscow`)
            .then(response => response.json())
            .then(response => this.data_set = response)
            .catch(err => console.error(err));
            resolve()
    })}

async resulting_(){
    await this.firstDo()
    await this.secondDo()
}

componentDidMount(){
   this.resulting_()
}

.....

There are a lot of problems with your code. Instance properties are not supported on React components, that's what state is for, and the documentation is very explicit about this. You also are mixing `async/await` and Promises in a way that makes no sense, and your methods pretty much all use the [Promise constructor antipattern](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it). Also by convention only class or constructor function names have a capital first letter. There are useless statements (they don't do anything). — Jared Smith, Jul 05 '22 at 21:11
...[cont'd] You set a state to a value from props, which is almost certainly not going to do what you think as the component gets re-rendered. Given that there's so much wrong with your code, it's hard to say "this is your problem and here's how you solve it". — Jared Smith, Jul 05 '22 at 21:14

score 0 · Answer 1 · answered Jul 05 '22 at 21:05

I don't think assining a variable like this in react would be a good idea. Better to use state variable. Try this:

import React, { Component } from 'react';

class Index extends Component {
    constructor(props) {
        super(props)
        // this.CurrentPosition = [0,0]
        this.state = {
            weather: props,
            CurrentPosition: [0, 0]
        }
    }

    data_set;
    // CurrentPosition;

    async firstDo() {
        return new Promise((resolve, reject) => {
            navigator.geolocation.getCurrentPosition(function (position) {
                this.setState(pre => ({
                    CurrentPosition: [
                        position.coords.latitude,
                        position.coords.longitude
                    ]
                }))
                resolve()
            })
        })
    }

    secondDo() {
        return new Promise((resolve, reject) => {
            fetch(`https://api.open-meteo.com/v1/forecast?latitude=${this.state.CurrentPosition[0]}&longitude=${this.state.CurrentPosition[1]}&daily=weathercode,temperature_2m_max,temperature_2m_min,apparent_temperature_max,apparent_temperature_min,sunrise,sunset,precipitation_sum,precipitation_hours,windspeed_10m_max,windgusts_10m_max,winddirection_10m_dominant,shortwave_radiation_sum,et0_fao_evapotranspiration&timezone=Europe%2FMoscow`)
                .then(response => response.json())
                .then(response => this.data_set = response)
                .catch(err => console.error(err));
            resolve()
        })
    }

    async resulting_() {
        await this.firstDo()
        await this.secondDo()
    }

    componentDidMount() {
        this.resulting_()
    }

}

export default Index;

This answer duplicates a lot of the problems in the OP's code (see my comments on the question). If you're going to answer it, please fix the glaring bugs and explain why the original code is wrong. — Jared Smith, Jul 05 '22 at 21:16

problems with getting coordinates in the react application

1 Answers1