为什么我的 axios 调用似乎永远持续下去？

Question

我是 React 的新手，我的任务是创建一个应用程序，该应用程序可以在海岸上找到一堆冲浪点，并将它们从新手到专家级冲浪者进行排名（取决于每个点的风速有多高）。

这是我当前正在进行的应用程序的链接： https : //lewisd1996.github.io/surferspotter/

当它加载时，您可以看到这些点已经加载到地图上，但是它不会停止 GET 请求并继续前进，您可以在 chrome 控制台中看到“XHR 完成加载：GET”“”。 计时器一直在持续，我的笔记本电脑的风扇开始超速运转。

一旦所有数据都被获取，我是否错过了告诉它停止的东西？

我的 SurfMap 组件：

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

var owmApiKey = '';

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

    render() {
        var startPosition = [36.778259, -119.417931] //STARTING POSITION OF THE MAP
        this.getSpots(); //POPULATE THE LIST OF SURFING SPOTS
        return (

                <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 MARKER FOR EACH ONE TO BE PLOTTED ONTO THE MAP
                        <Marker position={[spot.latitude,spot.longitude]} icon={myIcon}>
                            <Popup>
                                {spot.spot_name}
                            </Popup>
                        </Marker>    
                    )}
                </Map>

        )
    }
}

Answer 1

您需要在getSpots bind this ：

getSpots = () => {...```

然后在componentDidMount调用它（从渲染中删除它）：

componentDidMount() {
  this.getSpots()
}

Answer 2

发生这种情况是因为您在render()方法中调用 axios fetch 方法，即getSpots() 。 这是错误的。

每次更新时都会调用render()方法。 所以，当在该组件的东西会得到更新render()方法将被调用，您getSports()方法将被解雇。 避免在render()内进行网络调用

如果要获取数据，可以使用componentDidMount生命周期调用getSports() 。 因为，这个生命周期方法只会被调用一次。 您的网络呼叫只会发生一次。

所以，试试这个。

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

var owmApiKey = '';

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 SurfMap extends Component {

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

  componentDidMount(){
    this.getSpots();
  }

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

  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 MARKER FOR EACH ONE TO BE PLOTTED ONTO THE MAP
                <Marker position={[spot.latitude,spot.longitude]} icon={myIcon}>
                    <Popup>
                        {spot.spot_name}
                    </Popup>
                </Marker>    
            )}
        </Map>:
        <p>loading data....</p>}
      </>
    )
  }
}