この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

<aura:iteration> — 複数の items 設定

この警告は、<aura:iteration> タグの items 属性を同じ表示サイクルで複数回設定した場合に発生します。

2 つのコレクションが JavaScript で同じであるかどうかを簡単に効率よく確認する方法はありません。items の古い値が新しい値と同じであったとしても、以前に作成された <aura:iteration> タグのボディはフレームワークによって削除され、置き換えられます。

例

次のコンポーネントは、アンチパターンを示しています。

1<!--c:iterationMultipleItemsSet-->
2<aura:component>
3    <aura:attribute name="groceries" type="List" 
4                  default="[ 'Eggs', 'Bacon', 'Bread' ]"/>
5    
6    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
7
8    <aura:iteration items="{!v.groceries}" var="item">
9        <p>{!item}</p>
10    </aura:iteration>
11</aura:component>

コンポーネントのクライアント側コントローラを次に示します。

1/* c:iterationMultipleItemsSetController.js */
2({
3    init: function(cmp) {
4        var list = cmp.get('v.groceries');
5        // Some logic
6        cmp.set('v.groceries', list); // Performance warning trigger
7    }
8})

コンポーネントが作成されるときに、<aura:iteration> タグの items 属性が groceries 属性のデフォルト値に設定されます。コンポーネントが作成されてから表示されるまでの間に、init イベントがトリガされます。

クライアント側コントローラの init() 関数で groceries 属性が設定され、それによって <aura:iteration> タグの items 属性がリセットされます。この警告は、デバッグモードを有効にした場合にのみブラウザコンソールに表示されます。

1WARNING: [Performance degradation] markup://aura:iteration [id:5:0] in c:iterationMultipleItemsSet ["3:0"]
2had multiple items set in the same Aura cycle.

警告のスタック追跡を表示するには、警告の横の展開ボタンをクリックします。

ブラウザコンソールの [ソース] ペインに問題を起こしているコードの行を表示するには、スタック追跡で iterationMultipleItemsSet エントリのリンクをクリックします。

警告を修正する方法

<aura:iteration> タグの items 属性は��度も変更しないようにしてください。最も簡単な解決策は、マークアップの groceries 属性のデフォルト値を削除することです。代わりに、コントローラの groceries 属性の値を設定します。

別の解決策は、デフォルト値の保存のみを目的とする 2 番目の属性を作成することです。コントローラのロジックが完成したら、groceries 属性を設定します。

次に、修正したコンポーネントを示します。

1<!--c:iterationMultipleItemsSetFixed-->
2<aura:component>
3    <!-- FIX: Remove the default from the attribute -->
4    <aura:attribute name="groceries" type="List" />
5    <!-- FIX (ALTERNATE): Create a separate attribute containing the default -->
6    <aura:attribute name="groceriesDefault" type="List" 
7                  default="[ 'Eggs', 'Bacon', 'Bread' ]"/>
8
9    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
10
11    <aura:iteration items="{!v.groceries}" var="item">
12        <p>{!item}</p>
13    </aura:iteration>
14</aura:component>

次に、修正したコントローラを示します。

1/* c:iterationMultipleItemsSetFixedController.js */
2({
3    init: function(cmp) {
4        // FIX (ALTERNATE) if need to set default in markup
5        // use a different attribute
6        // var list = cmp.get('v.groceriesDefault');
7        // FIX: Set the value in code
8        var list = ['Eggs', 'Bacon', 'Bread'];
9        // Some logic
10        cmp.set('v.groceries', list);
11    }
12})

Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)

<aura:iteration> — 複数の items 設定

例

警告を修正する方法

関連項目: