Как сбросить счетчик в Re-frame (ClojureScript) - PullRequest
Новая
       87

Как сбросить счетчик в Re-frame (ClojureScript)

0 голосов
/ 27 февраля 2020

Это должно быть одна из тех глупых / сложных вещей, которые все основывают, изучая новую структуру. Итак, у меня есть эта функция: 

(defn display-questions-list
 []
 (let [counter (atom 1)]
     [:div
      (doall (for [question @(rf/subscribe [:questions])]
            ^{:key (swap! counter inc)} [question-item (assoc question :counter @counter)])])))

Атом @ counter не содержит никаких важных данных, это просто «визуальный» счетчик для отображения числа в списке. Когда страница загружается в первый раз, все работает нормально, если в списке отображается пять вопросов (1..5), проблема заключается в том, что когда вопрос создается / редактируется / удаляется подписка: 

 @(rf/subscribe [:questions])

вызывается снова, и затем, конечно, отображается список, но теперь с 6 до 11. Поэтому мне нужен способ сброса @counter.

1 Ответ

1 голос
/ 27 февраля 2020

Вы не должны использовать атом для этой цели. Ваш код должен выглядеть примерно так: 

  (ns tst.demo.core
    (:use tupelo.test)
    (:require [tupelo.core :as t]))

  (defn display-questions-list
    []
    [:div
     (let [questions @(rf/subscribe [:questions])]
       (doall (for [[idx question] (t/indexed questions)]
                ^{:key idx}
                [question-item (assoc question :counter idx) ])))])

Функция tupelo.core/indexed из библиотеки Tupelo просто добавляет нулевое значение индекса к каждому элементу в коллекция: 

(t/indexed [:a :b :c :d :e]) =>   

    ([0 :a] 
     [1 :b] 
     [2 :c] 
     [3 :d] 
     [4 :e])

Исходный код довольно прост: 

(defn zip-lazy
  "Usage:  (zip-lazy coll1 coll2 ...)

      (zip-lazy xs ys zs) => [ [x0 y0 z0]
                               [x1 y1 z1]
                               [x2 y2 z2]
                               ... ]

  Returns a lazy result. Will truncate to the length of the shortest collection.
  A convenience wrapper for `(map vector coll1 coll2 ...)`.  "
  [& colls]  
  (assert #(every? sequential? colls))
  (apply map vector colls))

(defn indexed
  "Given one or more collections, returns a sequence of indexed tuples from the collections:
      (indexed xs ys zs) -> [ [0 x0 y0 z0]
                              [1 x1 y1 z1]
                              [2 x2 y2 z2]
                              ... ] "
  [& colls]
  (apply zip-lazy (range) colls))

Обновление

Собственно, основная цель метаданных :key предоставить стабильное значение ID для каждого элемента в списке. Поскольку элементы могут быть в разных порядках, значение индекса списка на самом деле является React antipattern . Использование уникального идентификатора либо из элемента данных (т. Е. Идентификатор пользователя и т. Д. c), либо только из хеш-кода обеспечивает уникальное значение ссылки. Итак, на практике ваш код лучше написать так: 

(defn display-questions-list
  []
  [:div
   (doall (for [question @(rf/subscribe [:questions])]
            ^{:key (hash question)}
            [question-item (assoc question :counter idx)]))])

Некоторые примеры хеш-кодов: 

(hash 1)                   =>  1392991556
(hash :a)                  => -2123407586
(hash {:a 1, :b [2 3 4]})  =>   383153859
...