Clojurescript使用Reagent，插入组件函数会使组件不断地重新呈现随机生成的道具

Question

我有一个带有规范的Reagent组件，并尝试在开发过程中对其进行检测以验证属性：

(ns generic-components.numeric-input.view
  (:require
   [reagent.core :as r]
   [clojure.spec.alpha :as s]

   [clojure.test.check.generators]
   [clojure.test.check.properties]
   [clojure.test.check]
   [clojure.spec.test.alpha :as stest]
   ))

(s/def ::input-attr map?)
(s/def ::message-attr map?)

(s/def ::placeholder string?)

(s/def ::display-value string?)
(s/def ::message string?)
(s/def ::is-valid boolean?)
(s/def ::is-disabled boolean?)

(s/def ::handle-change
  (s/fspec
   :args (s/cat :val (s/or :string string? :nil nil?))
   :ret any?))

(s/def ::handle-blur
  (s/fspec
   :args (s/cat :val (s/or :string string? :nil nil?))
   :ret any?))

(s/def ::props (s/keys :req-un [::display-value
                                ::is-valid
                                ::handle-blur
                                ::handle-change]
                       :opt-un [::input-attr
                                ::message-attr
                                ::message
                                ::placeholder
                                ::is-disabled]))

(defn numeric-input [props]
  (println props)
  [:<>
   [:input (merge
            (:input-attr props)
            (select-keys props [:placeholder])
            {:class (r/class-names [(-> props :input-attr :class)
                                    (when
                                     (= false (:is-valid props))
                                      "invalid")])
             :value (:display-value props)
             :on-change #((:handle-change props) (-> % .-target .-value))
             :on-blur #((:handle-blur props) (-> % .-target .-value))}
            (when (::is-disabled props) {:disabled true}))]
   (when-let [message (:message props)]
     [:div (:message-attr props) message])])

(s/fdef numeric-input
  :args (s/cat :props ::props)
  :ret any?)

(stest/instrument `numeric-input)

我将其呈现如下：

(defn root []
  (let [input-val (r/atom "dv")]
    (fn [] [:div#app-root
     [:div.main-logo "Welcome to Crazy Ivan Motors"]
     [:div.screens
      [numeric-input {:display-value (or @input-val "") 
                      :is-valid true
                      :handle-change #(reset! input-val %)
                      :handle-blur #(reset! input-val %)}]]])))

当我打开页面时，我要么得到异常，要么页面呈现，但随后组件开始以尽可能快的速度使用随机字符串重新呈现。以下是道具的console.log输出(我每秒收到几十个)：

{:display-value 5iMJEW6wq587mS2s, :is-valid true, :handle-change #object[Function], :handle-blur #object[Function]} core.cljs:198:60
{:display-value , :is-valid true, :handle-change #object[Function], :handle-blur #object[Function]} 2 core.cljs:198:60
{:display-value PR2JMw9G6UJ, :is-valid true, :handle-change #object[Function], :handle-blur #object[Function]} core.cljs:198:60

我知道spec的生成功能，但我不明白，为什么/如何在这种情况下激活它们？

Answer 1

显然，问题是由以下原因引起的：

(s/def ::handle-change
  (s/fspec
   :args (s/cat :val (s/or :string string? :nil nil?))
   :ret any?))

(s/def ::handle-blur
  (s/fspec
   :args (s/cat :val (s/or :string string? :nil nil?))
   :ret any?))

看起来，在测试包含映射时，为映射密钥设置fspec会导致valid?通过生成来测试该密钥。切换到

(s/def ::handle-change fn?)
(s/def ::handle-blur fn?)