Lightning Aura组件doInit报错：action未定义求助

核心错误：变量拼写错误 #

报错acction is not defined的直接原因是JS助手文件中变量名拼写错误：你声明了var action = component.get("c.fetchAccount");，但后续调用时误写成了acction.setParams（多了一个c）。修正这个拼写错误即可解决初始化失败的问题。

其他需要修复的小问题 #

除了核心拼写错误，还有几处细节问题会影响组件功能：

1. 输入框onchange事件绑定错误
   原代码中<lightning:input>的onchange="searchAccounts"写法不符合Aura组件规范，必须使用表达式语法{!c.searchAccounts}，否则无法触发控制器中的searchAccounts方法。

2. 属性名大小写不匹配
   组件中声明的属性是newMessage（驼峰命名），但<h2>{!v.newmessage}</h2>中写成了全小写的newmessage，会导致无法正确渲染属性值，需修正为{!v.newMessage}。

3. 占位符拼写错误
   搜索框占位符Search Accouts应为Search Accounts（少了一个n）。

修正后的关键代码片段 #

修正后的JS助手文件 #

({  
    fetchAccHelper : function(searchVal, component) {  
        component.set("v.columnsToDisplay", [
            {label: "Account Name", fieldName: "Name", type: "text"},
            {label: "Account Number", fieldName: "AccountNumber", type: "text"},
            {label: "Account Owner", fieldName: "OwnerId", type: "text"},
            {label: "Phone", fieldName: "Phone", type: "text"}
        ]);
        
        var action = component.get("c.fetchAccount");
        // 修正拼写错误：acction → action
        action.setParams({
            "searchKeyWord": searchVal
        });
        
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state == "SUCCESS"){
                component.set("v.lstAccount", response.getReturnValue());
            }
            else{
                alert("An error occurred while fetching the data");
            }
        });
        $A.enqueueAction(action);  
    } 
})

修正后的组件文件关键部分 #

<aura:component controller="AccountListSearchController" implements="flexipage:availableForAllPageTypes"> 
    <!--access="global"-->     
    <aura:attribute name="lstAccount" type="Account[]"/>     
    <aura:attribute name="columnsToDisplay" type="List"/>     
    <aura:attribute name="searchKeyword" type="String"/>     
    <aura:attribute name="newMessage" type="String" default="Hello there!"/>          
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>          
    <!-- 修正属性名大小写：newmessage → newMessage -->
    <h2>{!v.newMessage}</h2>          
    <lightning:card iconName="standard:account" title="Account List">             
        <lightning:layout>         
            <lightning:layoutItem size="3" padding="around-small">
                <!-- 修正onchange绑定方式和占位符拼写 -->
                <lightning:input aura:id="searchField"                                  
                                label="Account Name/Email/Phone"                                  
                                value="{!v.searchKeyword}"                                   
                                placeholder="Search Accounts"
                                onchange="{!c.searchAccounts}"/>
            </lightning:layoutItem>         
        </lightning:layout>                  
        <lightning:datatable data="{!v.lstAccount}"                             
                            columns="{!v.columnsToDisplay}"                             
                            keyField="Id"                             
                            hideCheckboxColumn="true"/>              
    </lightning:card> 
</aura:component>

内容的提问来源于stack exchange，提问作者deep4code