试剂反应Clojurescript警告:seq中的每个元素都应具有唯一的:key [英] Reagent React Clojurescript Warning: Every element in a seq should have a unique :key

问题描述

我从此处复制了两岁的要点.现在，它可与Figwheel一起使用，并使用了较新版本的Reagent/React. 我正在寻找一种隔离Java控制台中出现此警告消息的通用方法:Warning: Every element in a seq should have a unique :key.想法是将具有生成的唯一值的:key放入所有组件中.然后消息应该消失，我将可以查看哪些组件需要唯一的:key.我的问题是，即使将唯一的:key放入其中，仍会看到警告消息.

I have copied a two year old gist from here. It is now working with Figwheel and uses a more recent version of Reagent/React. I am looking for a generic way of isolating this warning message that comes to the Javascript console: Warning: Every element in a seq should have a unique :key. The idea is to put a :key with a generated unique value into all the components. Then the messages ought to disappear and I'll be in a position to see which components needed the unique :key. My problem is that even although a unique :key is being put into all of them, the warning message is still seen.

那么-有人可以告诉我我错过了哪个组件，或者我做错了什么吗?如您从源(永久链接)所示已将:key (gen-key)添加到两个组件:分别在第43和68行的[:polyline {:key (gen-key) ...和[:svg {:key (gen-key) ....

So - would someone be able to tell me which component I have missed or otherwise what I've done wrong? As you can see from the source (permalink) I have added :key (gen-key) to the two components: [:polyline {:key (gen-key) ... and [:svg {:key (gen-key) ... at lines 43 and 68 respectively.

编辑，所以这是答案(永久链接)，无论如何用代码表示.只需在第44和60行寻找^{:key (gen-key)}的位置.

Edit So this is the answer (permalink), in terms of code anyway. Just look for the placement of ^{:key (gen-key)} at lines 44 and 60.

请注意，功能gen-key是用于调试的.要替换的自然键.

Note that the function gen-key was made for debugging. Natural keys to replace.

这是实现gen-key的方式:

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

这是上面链接中的方法:

And here's the way done in the links above:

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

推荐答案

从 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的 文档以获取更多信息.

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.

和关于动态子级的反应文档应该将您指向正确的位置方向.从高层次上讲，如果您有一些代码在某种循环中生成许多相似的组件，则需要在每个组件前面加上^{:key val}前缀.但是，由于试剂需要将其包含在向量中，因此通常需要将循环构造的输出包装在其他向量中，例如上述示例中的[:ul]或一般情况下的[:div].有时我会使用(into [:div] (for ....))类型的结构来做到这一点.

and the react documentation on dynamic children should point you in the right direction. At a high level, if you have some code which generates a number of similar components in some sort of loop, you need to prefix each component with the ^{:key val}. However, as reagent needs things to be in vectors, you will typically need to wrap the output from the looping construct in some other vector, such as the [:ul] in the above example or a [:div] in a general case. I sometimes use a (into [:div] (for ....)) type of construct to do this.

这篇关于试剂反应Clojurescript警告:seq中的每个元素都应具有唯一的:key的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！