Reagent React Clojurescript警告：seqのすべての要素にユニークキーが必要です

Question

hereから2歳の要点をコピーしました。 Figwheelと連携し、Reagent/Reactの最新バージョンを使用しています。 私はJavascriptコンソールに来るこの警告メッセージを隔離する一般的な方法を探しています：Warning: Every element in a seq should have a unique :key。考え方は、生成された一意の値を持つ:keyをすべてのコンポーネントに入れることです。その後、メッセージは消えてはならず、どのコンポーネントにユニークなものが必要であるかを知ることができます。:key私の問題は、ユニークな:keyがすべてに入れられているにもかかわらず、警告メッセージがまだ表示されていることです。

だから誰かが私が逃したコンポーネント、あるいは私が間違ったことを教えてくれますか？ source (permalink)からわかるように、:key (gen-key)を2つのコンポーネント：[:polyline {:key (gen-key) ...と[:svg {:key (gen-key) ...にそれぞれ43行と68行で追加しました。

これはコードの意味ではanswer (permalink)です。 の44行目と60行目の配置を探してください。

機能gen-keyはデバッグ用に作成されています。置き換えるべき自然キー。

これは、あなたがgen-keyを実装する方法を次のとおりです。

(defn gen-key [] 
    (gensym "key-")) 

そしてここでは、上記のリンクで行わ方法です：

(def uniqkey (atom 0)) 
(defn gen-key [] 
    (let [res (swap! uniqkey inc)] 
    (u/log res) 
    res)) 

Answer 1

Reagent Project site

(defn lister [items] 
    [:ul 
    (for [item items] 
    ^{:key item} [:li "Item " item])]) 

(defn lister-user [] 
    [:div 
    "Here is a list:" 
    [lister (range 3)]]) 

注における例から：^ {：キー項目}上記の部分は、この 単純な例では本当に必要ではないが、それだけに一意のキーを取り付けます 動的に生成されたコンポーネントのリスト内のすべてのアイテムは良い習慣であり、大きなリストのパフォーマンスを向上させるためには役に立ちます（ ）。キーは、 （この例のように）メタデータとして、またはコンポーネントの最初の引数（マップの場合）のキー項目として指定できます。詳細については、Reactの のドキュメントを参照してください。

およびreact documentationは、動的な子供の場合、正しい方向を指している必要があります。高いレベルで、何らかのループでいくつかの類似のコンポーネントを生成するコードがある場合は、各コンポーネントの先頭に^{:key val}を付ける必要があります。しかし、試薬にはベクターが必要であるため、一般的には、上記の例の[:ul]や[:div]など、他のベクターのループ構造からの出力をラップする必要があります。私は時々これを行うために(into [:div] (for ....))タイプの構造を使用します。

Answer 2

私はあなたが供給する必要があると信じて：を代わりにメタデータなどの重要な、のような例えば

^{:key (gen-key)} [:polyline ... 

私はあなたがここで行うようにそれだけで、コンポーネントのマップエントリとして追加することができると思います。

[trending-app {:key (gen-key) :state-ref paths-ratom :comms ch}] 

したがって、上記の作品ではなく、例えば

[:svg {:key (gen-key)