Reagent React Clojurescript Предупреждение: каждый элемент в seq должен иметь уникальный ключ:

Question

Я скопировал двухлетний сундук с here. В настоящее время он работает с Figwheel и использует более новую версию Reagent/React. Я ищу общий способ изолировать это предупреждающее сообщение, которое приходит на консоль Javascript: Warning: Every element in a seq should have a unique :key. Идея состоит в том, чтобы поместить :key с генерируемым уникальным значением во все компоненты. Затем сообщения должны исчезнуть, и я буду в состоянии увидеть, какие компоненты нуждаются в уникальном :key. Моя проблема заключается в том, что даже несмотря на то, что во всех них вводится уникальный :key, предупреждающее сообщение все еще видно.

Итак - мог бы кто-нибудь сказать мне, какой компонент я пропустил, или иначе, что я сделал неправильно? Как вы можете видеть из source (permalink), я добавил :key (gen-key) к двум компонентам: [:polyline {:key (gen-key) ... и [:svg {:key (gen-key) ... в строках 43 и 68 соответственно.

Редактировать Так что это answer (permalink), с точки зрения кода в любом случае. Просто найдите размещение ^{:key (gen-key)} по строкам 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's для получения дополнительной информации.

и 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)