Reagent React Clojurescript Ostrzeżenie: każdy element w seq powinien mieć unikalny klucz: klucz

Skopiowałem dwuletni test z here. Obecnie pracuje z Figwheel i używa nowszej wersji Reagent/React. Szukam ogólnego sposobu izolowania tego komunikatu ostrzegawczego, który pojawia się w konsoli JavaScript: Warning: Every element in a seq should have a unique :key. Chodzi o to, aby umieścić :key z wygenerowaną niepowtarzalną wartością we wszystkich komponentach. Następnie wiadomości powinny zniknąć, a będę w stanie sprawdzić, które komponenty wymagają unikatowego :key. Mój problem polega na tym, że pomimo wprowadzenia do nich wszystkich unikalnych :key, komunikat ostrzegawczy jest nadal widoczny.Reagent React Clojurescript Ostrzeżenie: każdy element w seq powinien mieć unikalny klucz: klucz

Czy ktoś mógłby mi powiedzieć, który element został pominięty lub w inny sposób, co zrobiłem źle? Jak widać z source (permalink) dodałem :key (gen-key) do dwóch składników: [:polyline {:key (gen-key) ... i [:svg {:key (gen-key) ... w liniach odpowiednio 43 i 68.

Edycja Tak więc jest to answer (permalink), jeśli chodzi o kod mimo to. Po prostu poszukaj miejsca ^{:key (gen-key)} w wierszach 44 i 60.

Należy pamiętać, że funkcja gen-key została wykonana do debugowania. Naturalne klucze do zastąpienia.

W ten sposób można realizować gen-key:

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

A oto sposób zrobić w linkach powyżej:

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

Źródło

2015-10-31 Chris Murphy

Z przykład na 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)]])

Uwaga:^{: kluczowy element} część powyżej naprawdę nie jest konieczne w tym prosty przykład, ale dołączenie unikalnego klucza do każda pozycja w dynamicznie generowanej liście komponentów jest dobrą praktyką i pomaga Reagować, aby poprawić wydajność dużych list. Kluczowi można nadać (jak w tym przykładzie) jako metadane lub jako: klucz w pierwszym argumencie dla komponentu (jeśli jest to mapa). Aby uzyskać więcej informacji, zobacz dokumentację React's .

i react documentation na dynamicznych dzieciach powinny skierować Cię we właściwym kierunku. Na wysokim poziomie, jeśli masz jakiś kod, który generuje pewną liczbę podobnych komponentów w jakiejś pętli, musisz przedrostkować każdy komponent przy pomocy ^{:key val}. Jednakże, ponieważ odczynnik potrzebuje rzeczy, które mają być w wektorach, zwykle trzeba zawinąć wynik z konstrukcji pętli w innym wektorze, takim jak [:ul] w powyższym przykładzie lub w przypadku ogólnym w przypadku [:div].Czasami używam do tego celu konstrukcji typu (into [:div] (for ....)).

Źródło

2015-11-01 01:34:03

Kod używa 'map' zamiast' for' i 'into', ale w tym samym efekcie. Grałem przy: klucz jako metadane lub jako pierwszy argument do komponentu. Ale zgodnie z dokumentacją * w zależności od tego, * która nie daje żadnych szans. Jest wiele punktów xy umieszczonych w '[: polilinie' - które nie mają żadnego klucza: być może to jest problem - wciąż próbuję to rozwiązać ... –

Z pewnością musi być jako metadane, a nie pierwszy element składnik i tak musi być w postaci '^ {: key val} [compnent]'. Zauważ też, że odczynnik nie radzi sobie dobrze z leniwym seq, dlatego często widzisz takie rzeczy jak '(do [] ...)' lub '(doall ...)' używane w celu zapewnienia, że seq jest realizowane. Upewnij się, że używanie najnowszego odczynnika jako komunikatów o błędach jest nieco lepsze. Wydaje mi się, że pamiętam, kiedy zobaczyłem Reactid, do którego odnosi się błąd z ostatnim razem, gdy go miałem, więc może możesz użyć inspektora przeglądarki, aby przyjrzeć się elementom strony, aby zorientować się, który komponent jest odpowiedzialny. –

W piątek jest kilka doskonałych dokumentacji odczynników. fram wiki, które mogą pomóc. W szczególności, https://github.com/Day8/re-frame/wiki/Using-%5B%5D-instead-of-%28%29 może pomóc w zrozumieniu, gdzie odczynnik utworzy składniki reakcji, co nie zawsze jest oczywiste i może pomóc w odnalezieniu potrzebnych metadanych. –

wierzę trzeba dostarczyć: klucz jako metadane zamiast, jak na przykład

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

myślę, że tylko on może być dodany jako wpis mapy komponentów, jak to zrobić tutaj:

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

więc powyższe prace, ale nie na przykład

[:svg {:key (gen-key)

Źródło

2015-10-31 20:05:24 PeakCode

Próbowałem wstawić '^ {: key (gen-key)}' z przodu dla '[: polyline' i' [: svg'. Do tej pory nie było szczęścia. Również z '[trending-app' nie musi być nic, więc naprawię to w źródle. Czy możesz podać odniesienie do dokumentacji jako część swojej odpowiedzi? –

Reagent React Clojurescript Ostrzeżenie: każdy element w seq powinien mieć unikalny klucz: klucz

Odpowiedz

Powiązane problemy