Мой вызов ax ios не останавливается, даже если он не включен в функцию рендеринга, а также не находит скорость ветра в файле json - PullRequest
Новая
       6

Мой вызов ax ios не останавливается, даже если он не включен в функцию рендеринга, а также не находит скорость ветра в файле json

0 голосов
/ 02 апреля 2020

У меня две проблемы сегодня. Недавно я опубликовал похожую проблему, и меня учили не размещать запросы API GET в разделе рендера моего кода.

Однако аналогичная проблема возникает снова.

В моем файле JSON имеется 302 местоположения, и запросы GET выполняются 302 раза, что является правильным, однако затем он продолжает делать это еще 604 раза, и я не уверен, почему.

Также даже после того, как все закончено, он даже не находит скорости ветра из файла JSON, который я пытаюсь проанализировать.

Спасибо Заранее всех.

Вот мой класс SurfMap (карта, которая будет содержать пятна для go серфинга) 

    import React, { Component } from 'react';
    import L from 'leaflet';
    import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
    import main from '../styles/main.scss';
    import SpotList from "./SpotList.js";
    import Spot from "./Spot.js";
    import axios from 'axios';

    var owmApiKey = '';

    const commonProps = {spot_name: 'prop1',myProp2: 'prop2'};

    export default class SurfMap extends Component {

        constructor() {
            super()
            this.state = {
                spots: [], //THE ARRAY THAT WILL HOLD THE LIST OF SURFING SPOTS
            }
            }

        getSpots = () => { //THE FUNCTION TO POPULATE THE LIST OF SPOTS USING AXIOS
            axios.get(`https://s3.eu-west-2.amazonaws.com/lpad-public-assets/software-test/all-spots.json`)
            .then(res => {
                this.setState({
                    spots: res.data
                });
            });
        }

        componentDidMount(){
            this.getSpots()
        }

        render() {
            var startPosition = [36.778259, -119.417931] //STARTING POSITION OF THE MAP
            return (
                <>
                {this.state.spots.length ? 
                    <Map className="map" center={startPosition} zoom={5}>
                        <TileLayer
                            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                            />
                        {this.state.spots.map (spot => //LOOP THROUGH THE LIST OF SPOTS AND CREATE A SPOT FOR EACH ONE TO BE PLOTTED ONTO THE MAP
                            <Spot {...spot} />
                        )}
                    </Map>:
            <p>loading data....</p>}
          </>

            )
        }
    }

Вот мой класс Spot (компонент, который будет создавать маркер с информацией о местоположении) 

import React, { Component } from 'react'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import axios from 'axios';

var owmApiCall = `api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={your api key}`
var owmApiKey = 'HIDING FROM STACKOVERFLOW';

var myIcon = L.icon({ //SETS UP THE PIN ICON THAT IS USED TO PLOT MARKERS ON THE MAP
    iconUrl: 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png',
    iconSize: [41,41],
    iconAnchor: [12.5,41],
    popupAnchor: [0, -41]
});

export default class Spot extends Component {

    constructor(props) {
        super()
        this.state = {
            county_name: props.county_name,
            latitude: props.latitude,
            longitude: props.longitude,
            spot_id: props.spot_id,
            spot_name: props.spot_name,
            wind_speed: 0,
        }
    }

    getWindSpeed = (lon, lat) => {//THE FUNCTION TO POPULATE THE LIST OF SPOTS USING AXIOS
        try{
            axios.get(`api.openweathermap.org/data/2.5/weather?lat=${this.state.latitude}&lon=${this.state.longitude}&appid=${owmApiKey}`)
            .then(res => {
                this.setState({
                    wind_speed: res.data.wind.speed
                });
            });
        } catch (error) {
            window.alert(error);
        }
    }

    async componentDidMount() {
        this.getWindSpeed();
    }

    render() {
        return(
        <Marker position={[this.state.latitude,this.state.longitude]} icon={myIcon}>
            <Popup>
                {this.state.spot_name + ", " + this.state.county_name + "Wind Speed: " + this.state.wind_speed}
            </Popup>
        </Marker>    
        )
    }
}

Пример файла JSON, который я пытаюсь проанализировать, находится здесь: 

 {
        "coord": {
            "lon": -124.21,
            "lat": 41.87
        },
        "weather": [
            {
                "id": 800,
                "main": "Clear",
                "descripti

on": "clear sky",
            "icon": "01d"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 279.26,
        "feels_like": 275.96,
        "temp_min": 277.15,
        "temp_max": 280.15,
        "pressure": 1024,
        "humidity": 70
    },
    "visibility": 16093,
    "wind": {
        "speed": 2.1,
        "deg": 50
    },
    "clouds": {
        "all": 1
    },
    "dt": 1585844305,
    "sys": {
        "type": 1,
        "id": 3594,
        "country": "US",
        "sunrise": 1585835801,
        "sunset": 1585881802
    },
    "timezone": -25200,
    "id": 5566285,
    "name": "Khoonkhwuttunne (historical)",
    "cod": 200
}
...