Javascript 响应在React组件中成功后继续执行

我有一个父组件和子组件。子对象是以特定坐标为中心的贴图。在表单提交时，我通过从父组件传递道具（坐标）来更新子组件中的地图坐标。坐标根据用户输入的地址字符串进行地理编码

一切正常，除了响应虽然成功，但无限循环。过了一分钟，我的浏览器就崩溃了

如何阻止响应每秒更新一次

代码如下：

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';
import Geocode from "react-geocode";

class MapContainer extends Component {
    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({centerMap: {
            lat: nextProps.lat,
            lng: nextProps.lng
        }})
    }

    render() {
        return (
          <Map center={this.props.centerMap} zoom={13} >
            <TileLayer
            attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
          </Map>
        );
    }
}

class Card extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userCoords: {
                lat: 91.93373,
                lng: -81.4280
            }
        }
    }

    render() {
        let data = this.props.data;

        // set Google Maps Geocoding API for purposes of quota management. Its optional but recommended.
        Geocode.setApiKey("MY_API_KEY");

        // Get latidude & longitude from address.
        Geocode.fromAddress(data.location).then(
          response => {
              const coords = response.results[0].geometry.location;

              this.setState({
                  userCoords: {
                      lat: coords.lat,
                      lng: coords.lng
                  }
              })
          },
          error => {
            console.error(error);
          }
        );

        return (
            <main className="main-card">
                <div className="main-card--header-bg">
                    <MapContainer centerMap={this.state.userCoords}/>
                </div>
            </main>
        );
    }
}

export default Card;

import React，{Component}来自'React'；
从“反应传单”导入{Map，TileLayer}；
从“react Geocode”导入地理编码；
类MapContainer扩展组件{
建造师（道具）{
超级（道具）；
}
组件将接收道具（下一步）{
此.setState（{centerMap:{
lat:nextProps.lat，
lng:nextProps.lng
}})
}
render（）{
返回(
);
}
}
类卡扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户坐标：{
纬度：91.93373，
液化天然气：-81.4280
}
}
}
render（）{
让data=this.props.data；
//设置GoogleMaps地理编码API用于配额管理。可选但推荐。
Geocode.setApiKey（“MY_API_KEY”）；
//从地址获取纬度和经度。
地理编码.fromAddress（data.location）。然后(
响应=>{
const coords=response.results[0].geometry.location；
这是我的国家({
用户坐标：{
lat:coords.lat，
液化天然气：coords.lng
}
})
},
错误=>{
控制台错误（error）；
}
);
返回(
);
}
}
导出默认卡；

移动

Geocode.setApiKey（“我的API密钥”）到构造函数或全局

然后创建一个方法，比如

fetchCoords(location) {
  Geocode.fromAddress(location).then(
          response => {
              const coords = response.results[0].geometry.location;

              this.setState({
                  userCoords: {
                      lat: coords.lat,
                      lng: coords.lng
                  }
              })
          },
          error => {
            console.error(error);
          }
        );

}

现在在包装器组件中写入componentDidMount和componentdiddupdate

componentDidMount() {
 let data = this.props.data;
 this.fetchCoords(data.location);  
}
componentDidUpdate(prevProps) {
  if(this.props.data != prevProps.data) {
    let data = this.props.data;
    this.fetchCoords(data.location); 
  }
}

componentDidMount将获取坐标并将其设置为状态，从而触发重新渲染器。所以componentDidUpdate将被调用，因为道具没有更改，它不会再次调用fetchCoords。现在，如果props.data发生更改，那么这次将调用componentDidUpdate，此时props将是新的，并且将启动新的获取。
在响应上，您正在设置一个新状态。这将触发重新渲染器，因此将再次调用render（）方法。这将导致另一个请求响应成功，以此类推。不要在呈现方法中设置新状态，因此，如果只需要一次（在第一次呈现时），请将请求放置在componentDidMount中，或者必须采取某种方式检查是否应获取新位置。我没有看到任何需要在每个渲染器上刷新它的用例。我已经将它放在渲染器之外，并使用一个名为“handleGeocoding”的函数在组件得到更新时调用地理编码器。但我还是得到了一个无限循环…工作完美无瑕！谢谢你的详细信息和极好的回答！