clojure - 如何在重新框架中遍历订阅的集合并将数据显示为列表项？

Question

考虑以下 clojurescript 代码，其中使用了幽灵、试剂和重新框架框架，外部 React.js 网格组件用作 View 组件。

在 db.cls 中:

(def default-db
  {:cats [{:id 0 :data {:text "ROOT" :test 17} :prev nil :par nil}
          {:id 1 :data {:text "Objects" :test 27} :prev nil :par 0}
          {:id 2 :data {:text "Version" :test 37} :prev nil :par 1}
          {:id 3 :data {:text "X1" :test 47} :prev nil :par 2}]})

在 subs.cls 中

(register-sub
  :cats
  (fn [db]
    (reaction
      (select [ALL :data] (t/tree-visitor (get @db :cats))))))

选择结果:

[{:text "ROOT", :test 17} 
 {:text "Objects", :test 27} 
 {:text "Version", :test 37} 
 {:text "X1", :test 47}]

在 views.cls

(defn categorymanager []
      (let [cats (re-frame/subscribe [:cats])]
         [:> Reactable.Table
             {:data (clj->js @cats)}]))

上面的代码按预期工作。

我想浏览 :cats 向量中的每个 map 并在 html ul/li 中显示 :text 项目，而不是使用 react.js 组件显示数据。

我开始如下:

(defn categorymanager2 []
      (let [cats (re-frame/subscribe [:cats])]
         [:div
           [:ul
             (for [category @cats] 
;;--- How to continue here ?? ---
        )
        ))

预期输出:

ROOT
Objects
Version
X1

如何在重新框架中遍历订阅的集合并将数据显示为列表项？ (= 标题问题)。

Answer 1

第一 , 清楚你为什么使用 key ...

供应key当列表非常动态时，对于列表中的每个项目很有用 - 当定期添加和删除新列表项目时，特别是如果该列表很长，并且正在列表顶部附近添加/删除项目。
keys可以带来巨大的性能提升，因为它们允许 React 更有效地重绘这些可变列表。或者，更准确地说，它允许 React 避免重绘与上次具有相同键的项目，并且没有改变，并且只是简单地上下移动。

第二 ，如果列表非常静态(它不会一直更改)或者如果每个项目没有关联的唯一值，请清楚你应该做什么......

不要使用 :key根本。相反，使用 into像这样:

(defn categorymanager []
  (let [cats (re-frame/subscribe [:cats])]
    (fn []
      [:div
       (into [:ul] (map #(vector :li (:text %)) @cats))])))

注意这里发生了什么。名单由 map提供已折叠 into [:ul]向量。最后，看不到 list 。只是嵌套向量。

当您嵌入 list 时，您只会收到有关丢失 key 的警告。打嗝。上面没有嵌入 list , 只是 vectors .

第三 ，如果您的列表确实是动态的...

添加唯一 key到每个项目(唯一的 sibling )。在给出的示例中， :text本身就够用了 key (我认为它是独一无二的):

(defn categorymanager []
  (let [cats (re-frame/subscribe [:cats])]
    (fn []
      [:div
        [:ul  (map #(vector :li {:key (:text %)} (:text %)) @cats)]])))

那个 map将导致 list这是 [:ul] 的第一个参数.当 Reagent/React 看到 list它会想看 keys在每个项目上(记住列表与 Reagent hiccup 中的向量不同)并且将向控制台打印警告 keys失踪。

所以我们需要添加一个 key到 list 的每一项.在上面的代码中，我们没有添加 :key通过元数据(尽管您可以根据需要这样做)，而我们提供的是 key通过第一个参数(来自 [:li] )，它通常也携带样式数据。

最后 - 第 1 部分 请勿使用 map-indexed正如另一个答案中所建议的那样。
key应该是与每个项目关联的唯一值。附加一些 arb 整数没有任何用处 - 好吧，它确实消除了控制台中的警告，但您应该使用 into上面的技术，如果这就是你想要的。

最后 - 第 2 部分 map之间没有区别和 for在这种情况下。

它们都导致 list .如果那 list有 key 然后没有警告。但是，如果缺少 key ，则会出现很多警告。但是列表是如何创建的并没有涉及。

所以，这个 for版本与 map 几乎相同版本。有些人可能更喜欢它:

(defn categorymanager []
  (let [cats (re-frame/subscribe [:cats])]
    (fn []
      [:div
        [:ul  (for [i @cats] [:li {:key (:text i)} (:text i)])]])))

也可以使用这样的元数据来编写:

(defn categorymanager []
  (let [cats (re-frame/subscribe [:cats])]
    (fn []
      [:div
        [:ul  (for [i @cats] ^{:key (:text i)}[:li  (:text i)])]])))

最后 - 第 3 部分
mapv因为这个问题是一个问题:
https://github.com/Day8/re-frame/wiki/Using-%5Bsquare-brackets%5D-instead-of-%28parentheses%29#appendix-2