LWC 专家超级徽章第 8 步boatSearchResults 错误

如何解决LWC 专家超级徽章第 8 步boatSearchResults 错误

enter image description here

我已经解决了几天，但找不到错误的实际原因。早些时候我遇到了一些与在 js 中导入方法相关的问题，但即使在解决之后我也无法继续。我已经检查了与显示的徽章任务相关的错误，但我在一点后无法移动。

    <!--BoatDataService.cls-->
    public with sharing class BoatDataService {
        public static final String LENGTH_TYPE = 'Length';
        public static final String PRICE_TYPE = 'Price';
        public static final String TYPE_TYPE = 'Type';
        @AuraEnabled(cacheable=true)
        public static List<Boat__c> getBoats(String boatTypeId) {
            // Without an explicit boatTypeId,the full list is desired
            String query = 'SELECT '
                         + 'Name,Description__c,Geolocation__Latitude__s,'
                         + 'Geolocation__Longitude__s,Picture__c,Contact__r.Name,'
                         + 'BoatType__c,BoatType__r.Name,Length__c,Price__c '
                         + 'FROM Boat__c';
            if (String.isNotBlank(boatTypeId)) {
                query += ' WHERE BoatType__c = :boatTypeId';
            }
            query += ' WITH SECURITY_ENFORCED ';
            return Database.query(query);
        }

        @AuraEnabled(cacheable=true)
        public static List<Boat__c> getSimilarBoats(Id boatId,String similarBy) {
            List<Boat__c> similarBoats = new List<Boat__c>();
            List<Boat__c> parentBoat = [SELECT Id,Price__c,BoatType__c,BoatType__r.Name
                                        FROM Boat__c
                                        WHERE Id = :boatId
                                        WITH SECURITY_ENFORCED];
            if (parentBoat.isEmpty()) {
                return similarBoats;
            }
            if (similarBy == LENGTH_TYPE) {
                similarBoats = [
                    SELECT Id,Name,Year_Built__c
                    FROM Boat__c
                    WHERE Id != :parentBoat.get(0).Id
                    AND (Length__c >= :parentBoat.get(0).Length__c / 1.2)
                    AND (Length__c <= :parentBoat.get(0).Length__c * 1.2)
                    WITH SECURITY_ENFORCED
                    ORDER BY Length__c,Year_Built__c
                ];
            } else if (similarBy == PRICE_TYPE) {
                similarBoats = [
                    SELECT Id,Year_Built__c
                    FROM Boat__c
                    WHERE Id != :parentBoat.get(0).Id
                    AND (Price__c >= :parentBoat.get(0).Price__c / 1.2)
                    AND (Price__c <= :parentBoat.get(0).Price__c * 1.2)
                    WITH SECURITY_ENFORCED
                    ORDER BY Price__c,Year_Built__c
                ];
            } else if (similarBy == TYPE_TYPE) {
                similarBoats = [
                    SELECT Id,Year_Built__c
                    FROM Boat__c
                    WHERE Id != :parentBoat.get(0).Id
                    AND (BoatType__c = :parentBoat.get(0).BoatType__c)
                    WITH SECURITY_ENFORCED
                    ORDER BY Price__c,Year_Built__c
                ];
            }
            return similarBoats;
        }

        @AuraEnabled(cacheable=true)
        public static List<BoatType__c> getBoatTypes() {
            return [SELECT Name,Id FROM BoatType__c WITH SECURITY_ENFORCED ORDER BY Name];
        }

        @AuraEnabled(cacheable=false)
        public static List<BoatReview__c> getAllReviews(Id boatId) {
            return [
                SELECT
                    Id,Comment__c,Rating__c,LastModifiedDate,CreatedDate,CreatedBy.Name,CreatedBy.SmallPhotoUrl,CreatedBy.CompanyName
                FROM
                    BoatReview__c
                WHERE
                    Boat__c =:boatId
                WITH SECURITY_ENFORCED
                ORDER BY
                    CreatedDate DESC
            ];
        }

        @AuraEnabled(cacheable=true)
        public static String getBoatsByLocation(Decimal latitude,Decimal longitude,String boatTypeId) {
            // Without an explicit boatTypeId,the full list is desired
            String query = 'SELECT Name,Geolocation__Longitude__s FROM Boat__c ';
            if (String.isNotBlank(boatTypeId)) {
                query += 'WHERE BoatType__c = :boatTypeId ';
            }
            query += ' WITH SECURITY_ENFORCED ORDER BY DISTANCE(Geolocation__c,GEOLOCATION(:latitude,:longitude),\'mi\') LIMIT 10';
            return JSON.serialize(Database.query(query));
        }
    }




<!--boatSearchResults.html-->
<template>
    <lightning-layout multiple-rows>
      <!-- Top -->
      <lightning-layout-item size="12">
        <lightning-card >
          <h1 slot="title">Find a Boat</h1>
          <!-- New Boat button goes here -->
          <h1 slot="actions">
            <lightning-button  label="New Boat" onclick={createNewBoat}></lightning-button>
          </h1>
          <p class="slds-var-p-horizontal_small slds-align_absolute-center">
            <!-- boatSearchForm component goes here -->
             <c-boat-search-form onsearch={searchBoats}></c-boat-search-form>
          </p>
        </lightning-card>
      </lightning-layout-item>
      <lightning-layout-item size="12" class="slds-var-p-top_small slds-is-relative">
        <template if:true={isLoading}>
          <lightning-spinner alernative-text = "Loading" variant= "brand"></lightning-spinner>
        </template>
        <template if:false={isLoading}>
          <c-boat-search-results boat-type-id={boatTypeId} onloading={handleLoading} ondoneloading={handleDoneLoading}></c-boat-search-results> 
        </template>
      </lightning-layout-item>
    </lightning-layout>
  </template>


<!--boatSearchResults.js-->
import { LightningElement,api,track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation'

export default class BoatSearch extends NavigationMixin(LightningElement) {
    @api isLoading = false;
    @track boatTypeId = '';
    // Handles loading event
    handleLoading() {
      this.isLoading = true;
     }
    
    // Handles done loading event
    handleDoneLoading() {
      setTimeout(()=>{
        this.isLoading = false;},1000)
     }
    
// Handles search boat event
// This custom event comes from the form
searchBoats(event) {
  this.handleLoading();
  this.boatTypeId = event.detail.boatTypeId;
  console.log(this.boatTypeId)
  this.template.querySelector('c-boat-search-results').searchBoats(this.boatTypeId);
  this.handleDoneLoading();
}

createNewBoat() {
  this[NavigationMixin.Navigate]({
    type:'standard__objectPage',attributes:{
      objectApiName: 'Boat__c',actionName: 'new'
    }
  })
 }

}

提前感谢您的回答