Reagent React Clojurescript 警告：seq 中的每个元素都应该有一个唯一的 :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) 添加到两个组件中：分别在第 43 行和第 68 行的 [:polyline {:key (gen-key) ... 和 [:svg {:key (gen-key) ...。

编辑因此，就代码而言，这就是 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

我认为您需要提供 :key 作为元数据，例如

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

我认为它只能作为组件的映射条目添加，就像您在此处所做的那样：

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

所以上面的工作，但不是例如

[:svg {:key (gen-key)

Answer 2

来自 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 应该为您指明正确的方向。在高层次上，如果您有一些代码在某种循环中生成许多相似的组件，则需要在每个组件前加上 ^{:key val} 前缀。然而，由于 reagent 需要向量中的东西，您通常需要将循环构造的输出包装在其他一些向量中，例如上面示例中的 [:ul] 或一般示例中的 [:div]案件。我有时会使用 (into [:div] (for ....)) 类型的构造来执行此操作。

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

Reagent React Clojurescript Warning: Every element in a seq should have a unique :key

clojurescript

reagent