[ReactJs] My axios call is not stopping even though it's not in the render function, also it is not finding the wind speed in the json file

I have two problems today. I posted a similar problem recently and I was taught not to place my API GET requests in the render section of my code.

However a similar problem is happening again.

There are 302 locations in my JSON file and the GET requests are done 302 times which is correct, however it then continues to do it another 604 times afterwards and I’m not sure why.

Also even after it’s all finished, it doesn’t even find the wind speeds from the JSON file I am attempting to parse.

Thank you in advance everyone.

Here is my SurfMap class (the map that will contain the spots to go surfing)

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';

    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>}
          </>

            )
        }
    }

Here is my Spot class (the component that will create a marker with the location’s details)

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>    
        )
    }
}

A sample of the JSON file I am trying to parse and take the wind speed from is here:

 {
        "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
}