clojurescript - 试剂 react Clojurescript 警告 : Every element in a seq should have a unique :key

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

Note: The ^{:key item} part above isn’t really necessary in this simple example, but attaching a unique key to every item in a dynamically generated list of components is good practice, and helps React to improve performance for large lists. The key can be given either (as in this example) as meta-data, or as a :key item in the first argument to a component (if it is a map). See React’s documentation for more info.

和 react documentation动态 child 应该为您指明正确的方向。在高层次上，如果您有一些代码在某种循环中生成许多类似的组件，则需要在每个组件前加上 ^{:key val} 前缀。 .但是，由于试剂需要将东西放在向量中，您通常需要将循环结构的输出包装在其他一些向量中，例如 [:ul]在上面的例子中或 [:div]在一般情况下。我有时使用 (into [:div] (for ....))执行此操作的构造类型。