Salesforce Aura组件中v.remainingBalance返回undefined问题排查

问题原因 #

Aura组件中声明的Decimal类型属性未设置默认值时，初始状态会是undefined而非null；同时lightning:input不存在官方标准的Decimal类型，错误使用该类型会导致双向绑定异常，进一步引发属性值获取异常。

修复步骤 #

• 给属性设置默认值：在aura:attribute中添加default="null"，确保属性初始值为null。
• 修正输入框类型：将lightning:input的type改为number，通过step属性控制精度，保证输入值能正确绑定到Decimal类型属性。

修正后的代码 #

CMP文件 #

<aura:attribute name="remainingBalance" type="Decimal" default="null" />

<lightning:tile label="Update Amount ">
    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-3 slds-align-bottom slds-p-around_medium">
            <lightning:input label="Enter New Amount" value="{!v.remainingBalance}" type="number" step="0.01" />
        </div>
        <div class="slds-col slds-size_1-of-3 slds-align-bottom slds-p-around_medium">  
            <lightning:button variant="neutral"
                              label="Update Amount"
                              title="Update Amount"
                              disabled="{!v.disableButton}"
                              onclick="{!c.updateRemainingBalance}"/>
        </div>
    </div>
</lightning:tile>

Controller文件（无需修改） #

({
    doInit : function(component, event, helper) {
    },
    updateRemainingBalance: function(component, event, helper) {
        console.log("Check1: " + component.get("v.remainingBalance"));
        helper.validateAndUpdateRemainingBalance(component, event);
    }
})

Helper文件（无需修改） #

({
    validateAndUpdateRemainingBalance : function(component, event) {
        console.log("Check2: " + component.get("v.remainingBalance"));
    }
}) 

效果说明 #

• 用户未输入值时，v.remainingBalance返回null；输入数值后返回对应Decimal类型值。
• type="number"配合step="0.01"既能限制输入为数值型，又能适配Decimal类型的精度需求，彻底解决绑定异常导致的undefined问题。

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