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)。只需在第44和第60行查找^{:key (gen-key)}的位置。

请注意，函数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)]])

注意：上面的^ {：key item}部分并不是必需的简单示例，但将唯一键附加到a中的每个项目动态生成组件列表是很好的做法，也有帮助响应以提高大型列表的性能。关键是可以给出要么（如本例所示）作为元数据，要么作为：中的关键项组件的第一个参数（如果它是一个映射）。见React的文档了解更多信息。

和动态儿童的react documentation应该指向正确的方向。在较高的层次上，如果你有一些代码在某种循环中生成许多类似的组件，你需要在每个组件前面加上^{:key val}。但是，由于试剂需要在向量中进行处理，因此通常需要将循环结构的输出包装在其他向量中，例如上例中的[:ul]或一般的[:div]。案件。我有时会使用(into [:div] (for ....))类型的构造来执行此操作。

Answer 2

我认为你需要提供：key作为元数据，比如说。

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

我认为它只能作为组件的地图条目添加，就像你在这里一样：

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

所以上述工作，但不是例如。

[:svg {:key (gen-key)

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

2 个答案: