Question

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

一切都很好，除了响应虽然成功，但无限循环。一分钟后，这只会让我的浏览器崩溃。

我应该如何阻止响应每秒更新？

以下是代码：

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;

Answer 1

移动

Geocode.setApiKey("MY_API_KEY");到构造函数或全局。

然后创建一个方法说

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

}

现在在Wrapper组件中写入componentDidMount和componentDidUpdate

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将是新的，并且将启动新的fetch。

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

1 个答案: