Reagenz Reagieren Clojurescript Warnung: Jedes Element in einem Seq sollte eine eindeutige haben: Schlüssel

Question

Ich habe einen zwei Jahre alten Kern von here kopiert. Es arbeitet jetzt mit Figwheel und verwendet eine neuere Version von Reagent/React. Ich bin auf der Suche nach einem generischen Weg zum Isolieren dieser Warnmeldung, die auf die Javascript-Konsole kommt: Warning: Every element in a seq should have a unique :key. Die Idee ist, einen :key mit einem generierten eindeutigen Wert in alle Komponenten zu setzen. Dann sollten die Nachrichten verschwinden und ich werde in der Lage sein zu sehen, welche Komponenten die einzigartige :key benötigt. Mein Problem ist, dass obwohl eine eindeutige :key in alle von ihnen eingefügt wird, die Warnmeldung immer noch gesehen wird.

Also - könnte mir jemand sagen, welche Komponente ich verpasst habe oder was ich sonst falsch gemacht habe? Wie Sie aus der source (permalink) entnehmen können, habe ich :key (gen-key) zu den beiden Komponenten hinzugefügt: [:polyline {:key (gen-key) ... und [:svg {:key (gen-key) ... in den Zeilen 43 und 68 jeweils.

Bearbeiten Also das ist die answer (permalink), in Bezug auf den Code sowieso. Suchen Sie einfach nach der Platzierung von ^{:key (gen-key)} in den Zeilen 44 und 60.

Beachten Sie, dass die Funktion gen-key zum Debuggen gemacht wurde. Natürliche Schlüssel ersetzen.

Dies ist, wie Sie gen-key implementieren könnte:

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

hier ist und die in den Links getan Weg oben:

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

Answer 1

Aus dem Beispiel an dem 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)]]) 

Hinweis: Die^{: key item} Teil oben ist nicht wirklich notwendig, in diesem einfachen Beispiel, aber einen eindeutigen Schlüssels zur Befestigung Jedes Element in einer dynamisch generierten Liste von Komponenten ist eine gute Methode und hilft Reagieren, um die Leistung für große Listen zu verbessern. Der Schlüssel kann entweder (wie in diesem Beispiel) als Metadaten oder als ein: Schlüsselelement im ersten Argument einer Komponente (wenn es eine Zuordnung ist) gegeben werden. Weitere Informationen finden Sie in der Dokumentation von React.

und die react documentation auf dynamische Kinder sollten Sie in die richtige Richtung zeigen. Auf einer hohen Ebene müssen Sie, wenn Sie Code haben, der in einer Art von Schleife eine Anzahl von ähnlichen Komponenten erzeugt, jeder Komponente die ^{:key val} voranstellen. Da das Reagenz jedoch Dinge in Vektoren benötigt, müssen Sie normalerweise die Ausgabe des Schleifenkonstrukts in einem anderen Vektor wie dem [:ul] im obigen Beispiel oder einem [:div] in einem allgemeinen Fall einbinden.Ich verwende manchmal einen (into [:div] (for ....)) Typ von Konstrukt, um dies zu tun.

Answer 2

Ich glaube, Sie die Versorgung benötigen: Schlüssel als Metadaten statt, wie z.B

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

Ich denke, es kann nur als MapEintrag für Komponenten hinzugefügt werden, wie Sie hier tun:

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

So die oben genannten Arbeiten, aber nicht z.B.

[:svg {:key (gen-key)