Reagent React Clojurescript警告:seq中的每个元素都应该有一个唯一的:key

Question

我从这里复制了一份两年前的要点.它现在正在使用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))

Answer 1

来自Reagent Project站点的示例

(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 ....))构造来做到这一点.