Skip to main content
Topics#ApexDomanda di Tanushree Khadanga
Tanushree Khadanga (khadangas) ha fatto una domanda in #Apex
17 mar 2023, 22:17

Getting error - This page has an error. You might just need to refresh it. Action failed: c:ContactListSearch$controller$searchKeyChange [Cannot read properties of undefined (reading 'setParams')]

Hello Team,

I am getting the following error - 

This page has an error. You might just need to refresh it. Action failed: c:ContactListSearch$controller$searchKeyChange [Cannot read properties of undefined (reading 'setParams')] Failing descriptor: {c:ContactListSearch$controller$searchKeyChange} 

while running the app with the following code.

QuickContacts.app

<aura:application>

    <link href='/resource/bootstrap/' rel="stylesheet"/>

    <div class="navbar navbar-default navbar-static-top" role="navigation">

        <div class="container">

            <div class="navbar-header">

                <a href="⌗" class="navbar-brand">Lightning Contacts</a>

            </div>

        </div>

    </div>

    <div class="container">

        <div class="row">

            <div class="col-sm-12">

                <c:ContactListSearch/>

                <c:ContactList/>

            </div>

        </div>

    </div>

</aura:application>

ContactList.cmp

<aura:component controller="ContactController">

    <aura:attribute name="contacts" type="Contact[]"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <aura:handler event="c:SearchKeyEvent" action="{!c.searchKeyChange}"/>

    <ul class="list-group">

        <aura:iteration items="{!v.contacts}" var="contact">

            <li class="list-group-item">

                <a href="{! '⌗contact/' + contact.Id }">

                    <p>{!contact.Name}</p>

                    <p>{!contact.Phone}</p>

                </a>

            </li>

        </aura:iteration>

    </ul>

</aura:component>

ContactListController.js

({

    doInit : function(component, event)

    {

        var action=component.get("c.findAll");

        action.setCallback(this,function(a)

                           {

                               component.set("v.contacts",a.getReturnValue());    

                           });

    $A.enqueueAction(action);

    },

    searchKeyChange: function(component, event) {

        var searchKey = event.getParam("searchKey");

        var action = component.get("c.findByName");

        action.setParams({

          "searchKey": searchKey

        });

        action.setCallback(this, function(a) {

            component.set("v.contacts", a.getReturnValue());

        });

        $A.enqueueAction(action);

    }

})

ContactListSearch.cmp

<aura:component >

    <input type="text" class="form-control" placeholder="Search" onkeyup="{!c.searchKeyChange}"/>

</aura:component>

SearchKeyEvent.evt

<aura:event type="APPLICATION" access="global">

    <aura:attribute name="searchKey" type="String"/>

</aura:event>

ContactListSearchController.js

({

        searchKeyChange : function(component, event, helper) {

        

        var myEvent = $A.get("e.c:SearchKeyChange");

        myEvent.setParams({"searchKey":event.target.value});

        myEvent.fire();

   

    }

    })

Can anyone please help me to find the error?
2 risposte
  1. Srikanth Pothuraj
    19 mar 2023, 05:25

    It looks like there is a typo in your code. In your ContactList.cmp component, you have specified the event name as c:SearchKeyEvent, but in your ContactListController.js controller, you have used c:SearchKeyChange as the event name.

    To fix the error, you need to update the event name in ContactList.cmp to c:SearchKeyChange to match the event name used in ContactListController.js.

    Here's the updated ContactList.cmp component code:

    <aura:component controller="ContactController">
        <aura:attribute name="contacts" type="Contact[]"/>
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        <aura:handler event="c:SearchKeyChange" action="{!c.searchKeyChange}"/>
        <ul class="list-group">
            <aura:iteration items="{!v.contacts}" var="contact">
                <li class="list-group-item">
                    <a href="{! '⌗contact/' + contact.Id }">
                        <p>{!contact.Name}</p>
                        <p>{!contact.Phone}</p>
                    </a>
                </li>
            </aura:iteration>
        </ul>
    </aura:component>
Scrivi una risposta...
0/9000