Карты Bing в React JS - компонент не загружается при смене реквизита

Question

Я пытаюсь показать карты Bing в своем приложении React, используя реквизит.Карты правильно отображаются при загрузке, но при смене реквизита компонент карты не будет перезагружен.Я знаю, что проблема в componentDidMount () будет вызываться только один раз при загрузке компонента, но я не уверен, как ее решить.

interface IState {
    addresses: Array<PropertyDetails>;
}

interface PropertyDetails {
    fullAddress: string;
    propertyNumber: number
}

export class Map extends React.Component<{ data }, IState> {

constructor(props) {
    super();
    this.state = {
        addresses: []
    };
}

getPropertyData() {
    let propertyData: Array<PropertyDetails> = [];
    let listProperties = this.props.data;

    if (listProperties.length > 0) {
        for (let i = 0; i < listProperties.length; i++) {
            let address = listProperties[i].Streetnumber + " " + 
                          listProperties[i].Streetname + " " + 
                          listProperties[i].City + " " + 
                          listProperties[i].State + " " + 
                          listProperties[i].Zip; 

            var Property: PropertyDetails = {
                fullAddress: address,
                propertyNumber: listProperties[i].Propertyidentity
            };

            propertyData.push(Property);
        }
    }

    this.setState({ addresses: propertyData })
}

loadBingMapScript() {
    var BingMaps = document.getElementById("BingMaps");
    if (BingMaps) {
        document.body.removeChild(BingMaps);
    }

    (window as any).loadMapScenario = () => this.InitMap();

    const script = document.createElement("script");
    script.src = "https://www.bing.com/maps/sdk/mapcontrol?callback=loadMapScenario";

    script.async = true;
    script.defer = true;

    script.id = "BingMaps";
    document.body.appendChild(script);
}

componentDidMount() {
    this.getPropertyData();
    this.loadBingMapScript();
}

private InitMap(): void {
    let mapElement: HTMLElement = this.refs.map as HTMLElement;
    (window as any).ShowMap(mapElement, this.state.addresses);
}

public render() {
    return <div>
        <div style={{ height: "500px", width: "100%" }}>
            <div id="map" ref="map"></div>
        </div>
    </div>
}
}

В приведенном выше коде я загружаю скрипт Bing Maps в componentDidMount ()и он вызывает метод JS в Index.html.Но когда второй набор пропущен, он не загружает компонент снова.Так что Карты не обновляются.

Ниже index.html

function ShowMap(div, AddressList) {

        var map = new Microsoft.Maps.Map(div, {
            credentials: 'Key'

        });

        map.setView({
            mapTypeId: Microsoft.Maps.MapTypeId.canvasLight,
            center: new Microsoft.Maps.Location(39.828605, -98.579501),
            zoom: 4,
            customMapStyle: {
                elements: {
                    area: { fillColor: '#b6e591' },
                    water: { fillColor: '#75cff0' },
                    tollRoad: { fillColor: '#a964f4', strokeColor: '#a964f4' },
                    arterialRoad: { fillColor: '#ffffff', strokeColor: '#d7dae7' },
                    road: { fillColor: '#ffa35a', strokeColor: '#ff9c4f' },
                    street: { fillColor: '#ffffff', strokeColor: '#ffffff' },
                    transit: { fillColor: '#000000' }
                },
                settings: {
                    landColor: '#efe9e1'
                }
            },
        });

        SearchMap(map, AddressList)

    }

    function SearchMap(map, addresses) {
        for (let i = 0; i < addresses.length; i++) {
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                var searchManager = new Microsoft.Maps.Search.SearchManager(map);
                var requestOptions = {
                    where: addresses[i].fullAddress,
                    callback: function (answer, userData) {
                        map.entities.push(new Microsoft.Maps.Pushpin(answer.results[0].location));
                    }
                };
                searchManager.geocode(requestOptions);
            });
        }
    }

---

ОБНОВЛЕНИЕ Я обнаружил, что загрузка Карт снова в ComponentDidUpdate () несколько исправила моюпроблема, но в результате получается так много ошибок.Поэтому я использую пакет Repm-Bing Maps npm.

Answer 1

Я бы использовал этот подход

componentDidUpdate (prevProps) {
    if (this.props !== prevProps) {
     // you can call your function here
     // Try to not use setState in this area
     // If you need to use, make sure to change only once
     // using if conditions like if(this.state.once)... then set to false
     }
}

---

Это решение вроде сработало. Обновление карты, но у меня тоже есть проблема.

 componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
        this.getPropertyData();
        this.loadBingMapScript();
    }
}

Я добавил вышеуказанный код и получаю следующие ошибки.

VM368 Log:1 Uncaught TypeError: Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest is not a function
    at VM100 Log:1
(anonymous) @ VM368 Log:1
3mapcontrol?callback=loadMapScenario:16 Uncaught TypeError: Cannot read property '0' of null

Answer 2

var Microsoft: any;

export class Home extends React.Component<RouteComponentProps<{}>, {}> {

constructor() {
    super();
}

loadBingMapScript() {
    var BingMaps = document.getElementById("BingMaps");
    if (BingMaps) {
        document.body.removeChild(BingMaps);
    }

    (window as any).loadMapScenario = () => this.InitMap();

    const script = document.createElement("script");
    script.src = "https://www.bing.com/maps/sdk/mapcontrol?callback=loadMapScenario";
    script.async = true;
    script.defer = true;

    script.id = "BingMaps";
    document.body.appendChild(script);
}

componentDidMount() {
    this.loadBingMapScript();
}

private InitMap(): void {
    Microsoft = (window as any).Microsoft;

    if (Microsoft !== undefined) {
        let mapElement: HTMLElement = this.refs.map as HTMLElement;

        var map = new Microsoft.Maps.Map(mapElement, {
            credentials: 'Credential',
            center: new Microsoft.Maps.Location(39.393486, -98.100769),
            zoom: 3
        });
        Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function () {
            // Creating sample Pushpin data within map view
            var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
            var clusterLayer = new Microsoft.Maps.ClusterLayer(pushpins, { gridSize: 100 });
            map.layers.insert(clusterLayer);
        });
    }
}

public render() {
    return <div>
        <div style={{ height: "500px", width: "100%" }}>
            <div id="map" ref="map" ></div>
        </div>
    </div>
    }
}