component.rerender is not a function error on a component

Question

I am stuck with the following error :

Uncaught Action failed: c:AccountMap$controller$jsLoaded [component.rerender is not a function]

Here is my component :

<aura:component implements="flexipage:availableForAllPageTypes">

<aura:attribute name="accounts" type="Account[]"/>
<aura:attribute name="selectedAccount" type="Account"/>

<!-- The Leaflet map object -->
<aura:attribute name="map" type="Object"/>
<!-- The Leaflet markers -->
<aura:attribute name="markers" type="Object"/>

<!-- Handler to display markers when account list changes -->
<aura:handler name="change" value="{!v.accounts}" action="{!c.accountsChangeHandler}"/>

<!-- Handler to re-center the map when selected account changes -->
<aura:handler name="change" value="{!v.selectedAccount}" action="{!c.selectedAccountChangeHandler}"/>

<div aura:id="map"></div>

<!-- Load the leaflet library (http://leafletjs.com for details) -->
<ltng:require styles="/resource/leaflet/leaflet.css" 
              scripts="/resource/leaflet/leaflet.js"
              afterScriptsLoaded="{!c.jsLoaded}" />

and the rerender :

({
rerender: function (component, helper) {

    var nodes = this.superRerender();

    // If the Leaflet library is not yet loaded, we can't draw the map: return
    if (!window.L) return nodes;

    var map = component.get("v.map");

    // Draw the map if it hasn't been drawn yet
    if (!map) {
        var mapElement = component.find("map").getElement();
        map = window.L.map(mapElement, {zoomControl: true}).setView([37.784173, -122.401557], 14);
        window.L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
                       {attribution: 'Tiles © Esri'}).addTo(map);
        component.set("v.map", map);
        var markers = new window.L.FeatureGroup();
        component.set("v.markers", markers);


           // If we had received accounts before Leaflet was loaded, add markers for these accounts
            helper.addMarkers(component);
        }
        return nodes;
    }
})

and here is the controller :

({
jsLoaded: function(component, event, helper) {
    component.rerender();
},

accountsChangeHandler: function(component, event, helper) {
    helper.addMarkers(component);
},

// Center the map on the account selected in the list
selectedAccountChangeHandler: function(component, event) {
    console.log('selectedAccountChangeHandler');
    var account = event.getParam("value");
    var map = component.get("v.map");
    console.log(account);
    if (account && map) {
        map.panTo([account.billingLatitude, account.billingLongitude]);
    }
}

})

Any help is greatly appreciated. Thanks a lot!

Answer 1

You don't call the rerender method directly. That will happen automatically whenever you do a component.set() on the component with a new value.