AMP列表中Dropdown自动刷新问题排查求助

我看了你的代码和问题描述，核心问题出在错误地把本地AMP State对象当作amp-list的数据源URL，这会触发amp-list发起无效请求，进而导致下拉框莫名刷新重置。下面帮你拆解问题并给出修正方案：

问题根源分析 #

你当前的第二个和第三个amp-list使用了[src]="test || 'xxx.json'"和[src]="test1 || 'xxx.json'"，但test和test1是通过AMP.setState设置的本地对象（比如第一个下拉选择后的国家对象，包含cities数组），而amp-list的src属性要求的是JSON数据源的URL地址，不是本地数据对象。当你选择第一个下拉时，test更新，amp-list会尝试把这个对象当作URL去请求，这显然是无效的，进而触发组件刷新，导致下拉框重置。

另外，你其实不需要用多个amp-list来渲染下拉框——因为你已经通过<amp-state id="dropdown">把所有数据加载到本地了，直接用Mustache模板结合AMP State就能渲染联动下拉，不需要重复请求数据源。

修正后的代码示例 #

<!-- 第一个下拉：选择国家 -->
<select on="
    change:
      AMP.setState({
        selectedCountry: dropdown.items[0].countries.find(x => x.name == event.value)
      })">
  <option value="">Choose Degree</option>
  {{#dropdown.items[0].countries}}
  <option value="{{name}}">{{name}}</option>
  {{/dropdown.items[0].countries}}
</select>

<!-- 第二个下拉：选择城市，依赖选中的国家 -->
<select [disabled]="!selectedCountry" on="
    change:
      AMP.setState({
        selectedCity: selectedCountry.cities.find(x => x.name == event.value)
      })">
  <option value="">Choose AOS</option>
  {{#selectedCountry.cities}}
  <option value="{{name}}">{{name}}</option>
  {{/selectedCountry.cities}}
</select>

<!-- 第三个下拉：选择细分项，依赖选中的城市 -->
<select [disabled]="!selectedCity">
  <option value="">Choose Specialization</option>
  {{#selectedCity.specializations}}
  <option value="{{name}}">{{name}}</option>
  {{/selectedCity.specializations}}
</select>

<!-- 加载数据源到AMP State -->
<amp-state id="dropdown" src="https://capellaamp.herokuapp.com/dropdown.json"></amp-state>

关键修正点说明 #

• 移除了所有不必要的amp-list：因为数据已经通过amp-state加载到本地，直接用Mustache模板渲染下拉选项即可，避免重复请求和无效刷新。
• 修正了联动逻辑：用selectedCountry和selectedCity来存储选中的对象，后续下拉直接使用这些对象的子数组（比如selectedCountry.cities）渲染选项。
• 添加了[disabled]属性：当下一级依赖的选项未选中时，禁用下拉框，提升用户体验。
• 使用find替代filter[0]：find方法更直接地返回匹配的单个对象，代码更简洁。

额外提示 #

如果你的JSON数据结构中，城市对应的细分项字段不是specializations，记得把第三个下拉的{{#selectedCity.specializations}}改成你实际的字段名，否则不会渲染出选项哦。

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