Почему функция javascript (сопоставленная с кнопкой) не полностью выполняется в мобильных браузерах?

Question

Редактировать, я понял это, и я понял это, я имею в виду, что я понятия не имею, как проблема устранилась, потому что этот точный код все еще выполняется, но он только начал работать на моем телефоне сейчас , возможно, проблема связана с устройством или что-то в этом роде.

Я протестировал эту handleSubmit() функцию на рабочем столе со всеми типами экранов ChromeDev, так что это не проблема.

Я отлаживал свой код с помощью предупреждений (я знаю) и отслеживал точку останова (в мобильном телефоне) до моей функции showPosition(). Он никогда не оценивает, даже если это необходимо, на мобильном телефоне, но на настольном компьютере все прекрасно работает.

Если вы проходите через мое гнездо функций, то здесь ожидаемое поведение:

1. оповещение (если eval)
2. оповещение (начало показа)
3. оповещение (состояние установлено)
4. alert (прошлый getLocation) перезапустить this.handlesubmit
5. alert (прошлый getLocation) перезапустить this.handlesubmit
6. предупреждение (мимо indexdata)
7. оповещение (прошедший цикл)
8. перенаправление: страница сведений

наблюдаемое поведение на iOS Chrome & Safari:

1. оповещение (если eval)

TLDR:

Отлично работает, все браузеры: Windows 10

Кнопка

не работает, все браузеры: iOS 12 с Javascript ON и Safari Location Services While using the app

Вот код:

import React from 'react';
import Button from '@material-ui/core/Button';
import Fade from '@material-ui/core/Fade';
import LinearProgress from '@material-ui/core/LinearProgress';
import LocationIcon from '@material-ui/icons/LocationSearchingOutlined';
import searchClient from '../components/SearchClient';

const index = searchClient.initIndex("Parks");

class ButtonComponent extends React.Component{
    state = {
        loading: false,
        userlat: null,
        userlong: null,
        parkData: null,
    };
    render(){
        const loading = this.state.loading;
        return(
            <div>
                <Button color="secondary" variant="contained" size="large" onClick={() => this.handleSubmit()} style={{
                    width: "100%",
                    fontSize: 30,
                    color: "#FFFFFF"
                }}>
                    Find the nearest point of interest
                    <LocationIcon style={{
                        paddingLeft: '10px',
                    }} />
                </Button>
                <Fade in={loading}>
                    <LinearProgress/>
                </Fade>
            </div>
        )
    }

    showPosition = (position) => {
        alert('started showPosition');
        this.setState(state => ({
            userlat: position.coords.latitude,
            userlong: position.coords.longitude,
        }));
        alert('state set');
        this.handleSubmit();
    };

    getLocation = () => {
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(this.showPosition);
            alert('if eval');
        }
        else {
            alert("Geolocation isn't supported by device hardware.");
            this.state.loading = false;
        }
    };

    indexData = () => {
        const browser = index.browseAll("", {
            attributesToRetrieve:[
                'latLong',
                'parkCode',
            ]
        });
        let hits = [];

        browser.on('result', content => {
            hits = hits.concat(content.hits);
            this.state.parkData = hits;
            this.handleSubmit();
        });

        browser.on('end', () => {
            console.log(`${hits.length} total responses.`);
        });

        browser.on('error', err => {
            throw err;
        });
    };

    calculateDistance = (coords) => {
        if (coords.length < 2){
            return 360;
        }
        else{
            return Math.sqrt(Math.pow(coords[1] - this.state.userlong, 2) + Math.pow(coords[0] - this.state.userlat, 2));
        }
    };

    handleSubmit = () => {
        this.setState(state => ({
            loading: true
        }));
        if(this.state.userlat == null || this.state.userlong == null){
            this.getLocation();
            return false;
        }
        alert('past getlocation');
        if(this.state.parkData == null){
            this.indexData();
            return false;
        }
        alert('past indexdata');
        var nearestPOI = {
            parkCode: null,
            lat: 180.0,
            long: 360.0,
            distance: 360.0
        };
        for (var i = 0; i < this.state.parkData.length; i++){
            const parkCoords = this.state.parkData[i].latLong.replace(/[^\d.,-]/g, '').split(",").map(Number);
            const parkDistance = this.calculateDistance(parkCoords);
            if (parkDistance < nearestPOI.distance){
                nearestPOI.parkCode = this.state.parkData[i].parkCode;
                nearestPOI.lat = parkCoords[0];
                nearestPOI.long = parkCoords[1];
                nearestPOI.distance = parkDistance;
            }
        }
        alert('past loop');
        console.log(nearestPOI.parkCode);
        window.location.href = "/details?objectId=" + nearestPOI.parkCode;
    }
}

export default ButtonComponent;

Я попытался изменить следующую строку

navigator.geolocation.getCurrentPosition(this.showPosition);

до

navigator.geolocation.getCurrentPosition(() => this.showPosition());

без успеха.