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

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

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

Редактировать Так что это ответ (постоянная ссылка), с точки зрения кода в любом случае. Просто посмотрите на размещение ^{: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))
Источник

2 ответа

Решение

Из примера на сайте Проекта реагентов

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

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

Примечание. Приведенная выше часть ^{:key item} в этом простом примере на самом деле не нужна, но присоединение уникального ключа к каждому элементу в динамически создаваемом списке компонентов является хорошей практикой и помогает React повысить производительность для больших списков. Ключ может быть задан либо (как в этом примере) как метаданные, либо как элемент: key в первом аргументе компонента (если это карта). См. Документацию React для получения дополнительной информации.

и документация о реакции на динамических детей должна указывать вам правильное направление. На высоком уровне, если у вас есть какой-то код, который генерирует ряд похожих компонентов в каком-то цикле, вам нужно поставить перед каждым компонентом префикс ^{:key val}, Тем не менее, поскольку реагент нуждается в вещах в векторах, вам, как правило, нужно будет обернуть выходные данные из циклической конструкции в какой-то другой вектор, такой как [:ul] в приведенном выше примере или [:div] в общем случае. Я иногда использую (into [:div] (for ....)) тип конструкции, чтобы сделать это.

Источник

Я считаю, что вместо этого вы должны указать ключ:key, например, например

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

Я думаю, что это может быть добавлено только как запись карты для компонентов, как вы делаете здесь:

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

Таким образом, вышесказанное работает, но не, например,

[:svg {:key (gen-key)
Источник
Другие вопросы по тегам