商品列表页amp-list组件加载更多功能异常问题排查

Alright, let's tackle this tricky AMP "Show More" button problem you're seeing across Firefox and Chrome. No console errors makes this extra sneaky, but looking at your code, there are a few key state binding and initialization issues causing the inconsistencies.

Quick Recap of Your Problem #

• Firefox: Button works on first page load, but breaks after refreshing
• Chrome: Button fails on initial load, but starts working after using back/forward navigation
• No error messages to point us in the right direction—classic race condition scenario!

What's Going Wrong in the Code? #

Let's break down the root causes:

• Mixed amp-list source: Your list starts with a hardcoded API URL, then switches to binding to productsState.items. AMP's binding system doesn't handle this switch smoothly across browsers, leading to state mismatches.
• Uninitialized state risk: The productsState loads from an external API, but there's no guarantee it's fully loaded before the amp-list or form tries to use its data. Browsers handle this race condition differently, which explains the inconsistent behavior.
• Fragile state updates: When concatenating new items, you're relying on productsState.items which might be undefined or not fully populated on first load in some browsers.

Fixed Code with Explanations #

Here's the revised code that fixes all these issues:

<!-- First, initialize productsState with an empty items array to avoid undefined errors -->
<amp-state id="productsState">
  <script type="application/json">
    {
      "items": []
    }
  </script>
  <!-- Load initial data and update state once the API call completes -->
  <amp-state src="/solrSearchAmp?productCategoryId=14030181&sortResults=customerRating-desc"
    on="AMP-State-Set: AMP.setState({ productsState: event.value })">
  </amp-state>
</amp-state>

<amp-state id="product">
  <script type="application/json">
    {
      "start": 20,
      "hasMorePages": true
    }
  </script>
</amp-state>

<!-- Bind amp-list directly to productsState.items from the get-go -->
<amp-list src="amp-state:productsState.items" 
          width="320" 
          height="2000" 
          [height]="productsState.items.length * 200" 
          class="m1"
          binding="no">
  <template type="amp-mustache">
    <li class="content navigation ampsiteHeaderNavigation">
      <div class="js_eCommerceThumbNailHolder eCommerceThumbNailHolder">
        <div class="js_swatchProduct">
          <a class="pdpUrl" title="{{name}}" href="{{seoFriendlyUrl}}" id="{{productId}}">
            <amp-img alt="{{name}}" title="{{name}}" src="http://{{productImageSmallUrl}}" class="productThumbnailImage" height="140" width="170">
            </amp-img>
          </a>
        </div>
      </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
      {{#outOfStock}}
      <div class="stock">Out Of Stock</div>
      {{/outOfStock}}
      <div>
        <a class="eCommerceProductLink pdpUrl" title="{{name}}" href="{{seoFriendlyUrl}}" id="detailLink_{{productId}}"><span>{{name}}</span></a>
      </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
      <div class="js_plpPriceList">
        <span><b>&#x20b9;{{listPrice}}</b></span>
      </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
      <div class="js_plpPriceSavingPercent">
        {{#showPercent}}
        <span>({{youSavePercent}}% off)</span>
        {{/showPercent}}
      </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
      <div class="js_plpPriceOnline">
        <span><b>&#x20b9;{{price}}</b></span>
      </div>
    </li>
  </template>
</amp-list>

<!-- Updated form with safer state handling -->
<form method="GET" 
      action="/solrSearchAmp?productCategoryId=14030181&sortResults=customerRating-desc" 
      action-xhr="/solrSearchAmp?productCategoryId=14030181&sortResults=customerRating-desc" 
      target="_top"
      on="submit-success: 
        AMP.setState({ 
          productsState: { 
            items: productsState.items.concat(event.response.items || []) 
          }, 
          product:{ 
            start: product.start + 20, 
            hasMorePages: !!event.response.hasMorePages 
          } 
        });">
  <input type="hidden" name="start" [value]="product.start">
  <input type="submit" 
         value="Show more" 
         class="ampstart-btn caps m1 show" 
         [class]="product.hasMorePages ? 'ampstart-btn caps m1 mb3 show' : 'hide'">
</form>

Key Fixes Breakdown #

• Explicit state initialization: We start with an empty items array in productsState, so the list never tries to access undefined data while the API loads. The external amp-state uses AMP-State-Set to update the state once data is ready.
• Consistent amp-list source: Instead of switching between a hardcoded URL and state binding, we directly bind the list to productsState.items using amp-state:. This eliminates race conditions between list loading and state setup.
• Safer state updates: Added guards like || [] to handle cases where event.response.items might be undefined, and !! to ensure hasMorePages is always a boolean. This prevents unexpected state issues.
• Cleaner class binding: Simplified the button's class expression to be more readable and reliable, avoiding unnecessary complexity in the binding logic.

Final Checks to Ensure Success #

• Double-check that your /solrSearchAmp endpoint returns a consistent structure every time—even when there are no more products, it should return an empty items array and hasMorePages: false.
• Clear your browser cache and test across Firefox and Chrome again to confirm the fixes work in all scenarios.

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