React JS中的Bing地图 - 当道具改变时，Component不会加载

Question

我试图使用道具在我的React应用程序上显示bing贴图。地图在加载时正确显示，但当道具更改时，它将不会重新加载地图组件。我知道问题是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>
}
}

在上面的代码中，我在componentDidMount（）中加载Bing Maps脚本，并在Index.html中调用JS方法。但是当传递第二组道具时，它不会再次加载该组件。因此地图不会刷新。

下面是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（）中再次加载地图确实在某种程度上解决了我的问题但最终导致了这么多错误。所以我使用的是React-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>
    }
}