LWC商机名称检索表单异常：始终返回无结果求助

你的LWC组件始终返回"No result found"，核心原因是参数不匹配、变量错误、查询逻辑缺失这几个关键问题，以下是具体修复步骤：

1. Apex控制器方法错误 #

• 前端调用时传递了accountId和opportunityName两个参数，但Apex方法仅接收opportunityName，且查询未关联当前账户ID，导致无法过滤指定账户下的商机。
• 查询字段缺少CloseDate，前端表格需要展示该字段但未查询。

修复后的Apex代码：

public with sharing class OpportunitySearchControllerLWC {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> findOpportunityByAccount(String accountId, String opportunityName) {
        // 组合账户ID和商机名称的过滤条件，处理空值场景
        String searchKeyword = String.isBlank(opportunityName) ? '%' : '%' + opportunityName + '%';
        return [SELECT Id, Name, StageName, Amount, CloseDate 
                FROM Opportunity 
                WHERE AccountId = :accountId 
                AND Name LIKE :searchKeyword];
    }
}

2. LWC前端变量与方法错误 #

(1) 重复声明accountId导致API属性失效 #

你在@api accountId后又重新声明了accountId，覆盖了组件从页面接收的账户ID，导致查询时accountId为空。

删除重复声明的accountId;：

@api accountId;
// 移除下面这行
// accountId;

(2) handleKeyChange方法取值错误 #

当前方法试图获取event.target.dataset.label，但搜索输入框没有这个属性，应该直接取输入框的value：

修复后的handleKeyChange：

handleKeyChange(event) {
    this.opportunityName = event.target.value;
}

(3) 模板输入框绑定变量不匹配 #

模板中lightning-input的value={searchOppo}，但JS中没有定义searchOppo变量，改为绑定opportunityName：

<lightning-input type="search" label="Rechercher" value={opportunityName} onchange={handleKeyChange}
    placeholder="Search..."></lightning-input>

(4) 冗余的wire方法与冲突命名 #

你同时使用了@wire装饰器和手动调用Apex方法，且wiredOpportunities方法名与@wire绑定的opportunities变量冲突，建议移除冗余的wire代码，因为业务逻辑是点击搜索触发查询，而非自动加载：

删除以下代码块：

@wire(findOpportunityByAccount, { accountId: '$accountId' }) opportunities;

wiredOpportunities({ error, data }) {
    if (data) {
        this.opportunityList = data;
        this.showSearchValues = data.length > 0;
        this.messageResult = data.length === 0 && this.opportunityName !== '';
    } else if (error) {
        console.log(error);
    }
}

(5) 表格空值处理与选中方法实现 #

当selectedOpportunity未选中时，表格会报错，需要添加空值判断；同时补充handleParentSelection方法的实现：

模板中包裹表格：

<template if:true={selectedOpportunity}>
    <div class="slds-table">
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
            <!-- 表格内容保持不变 -->
        </table>
    </div>
</template>

JS中添加选中方法：

handleParentSelection(event) {
    const oppId = event.currentTarget.dataset.value;
    this.selectedOpportunity = this.opportunityList.find(opp => opp.Id === oppId);
}

3. 完整修复后的LWC JS代码 #

import { LightningElement, track, api } from 'lwc';
import findOpportunityByAccount from '@salesforce/apex/OpportunitySearchControllerLWC.findOpportunityByAccount';

export default class DisplayOpportunityList extends LightningElement {
    @track opportunityName = '';
    @track opportunityList;
    @track messageResult = false;
    @track showSearchValues = false;
    @track selectedOpportunity;
    @api accountId;
    error;

    handleKeyChange(event) {
        this.opportunityName = event.target.value;
    }

    handleSearch() {
        if (!this.accountId) {
            this.messageResult = true;
            this.showSearchValues = false;
            return;
        }
        findOpportunityByAccount({ 
            accountId: this.accountId,
            opportunityName: this.opportunityName 
        })
        .then(result => {
            this.opportunityList = result;
            this.showSearchValues = result.length > 0;
            this.messageResult = result.length === 0 && this.opportunityName !== '';
            this.selectedOpportunity = result.length > 0 ? result[0] : undefined; // 默认选中第一个
            this.error = undefined;
        })
        .catch(error => {
            this.error = error;
            this.opportunityList = [];
            this.showSearchValues = false;
            this.messageResult = true;
            console.error('查询错误:', error);
        });
    }

    handleParentSelection(event) {
        const oppId = event.currentTarget.dataset.value;
        this.selectedOpportunity = this.opportunityList.find(opp => opp.Id === oppId);
    }
}

4. 最终模板代码 #

<template>
    <lightning-card title="账户商机列表" icon-name="standard:opportunity">
        <div class="slds-p-horizontal_small">
            <lightning-input type="search" label="搜索商机" value={opportunityName} onchange={handleKeyChange}
                placeholder="输入商机名称..."></lightning-input>
            <lightning-button label="搜索" onclick={handleSearch} variant="brand" class="slds-m-left_small"></lightning-button>
        </div>
        <div if:true={messageResult} class="slds-p-horizontal_small slds-m-top_medium">
            <p class="slds-text-color_error">未找到匹配的商机</p>
        </div>
        <template if:true={showSearchValues}>
            <div class="slds-p-horizontal_small slds-m-top_medium">
                <ul class="slds-list_vertical">
                    <template for:each={opportunityList} for:item="opp">
                        <li key={opp.Id} onclick={handleParentSelection} data-value={opp.Id}
                            class="slds-p-around_small slds-text-link" style="cursor:pointer;">
                            {opp.Name}
                        </li>
                    </template>
                </ul>
            </div>
            <template if:true={selectedOpportunity}>
                <div class="slds-p-horizontal_small slds-m-top_medium">
                    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                        <thead>
                            <tr class="slds-line-height_reset">
                                <th class="slds-text-title_caps" scope="col">商机名称</th>
                                <th class="slds-text-title_caps" scope="col">阶段</th>
                                <th class="slds-text-title_caps" scope="col">关闭日期</th>
                                <th class="slds-text-title_caps" scope="col">金额</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="slds-hint-parent">
                                <td data-label="商机名称">{selectedOpportunity.Name}</td>
                                <td data-label="阶段">{selectedOpportunity.StageName}</td>
                                <td data-label="关闭日期">{selectedOpportunity.CloseDate}</td>
                                <td data-label="金额">{selectedOpportunity.Amount}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </template>
        </template>
    </lightning-card>
</template>

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