为什么组件在试剂中不能正确呈现？

Question

当在Clojurescript I上试用this post时，我尝试了不同的方法来实现timer-component组件。我第一次尝试，但是，没有工作：

(defn timer-component [] 
    (fn [] 
    (let [seconds-elapsed (r/atom 0)] 
     (js/setTimeout #(swap! seconds-elapsed inc) 1000) 
     [:p (str "Expired time: " @seconds-elapsed)]))) 

由于调试日志声明显示计时器仍经常叫和seconds-elapsed变量仍正常更新。但是，显示屏未更新，组件始终显示“过期时间：0”。

与博客文章中的代码示例相比，我的组件交换fn和let声明，并且此修改似乎阻止正确显示，但无法正确更新组件。我的期望是组件既可以更新也可以正确显示，或者既不更新也不显示。

我的问题是为什么会发生这种情况？这是否是Reagent中的错误或者是我滥用API？

Answer 1

您总是看到相同的值，因为每个（重新）渲染都会调用内部匿名函数。因此，seconds-elapsed被一次又一次绑定到一个新值为0的原子。这不是一个错误，但Reagent应该如何工作。

你的组件是“Form-2”，并且应该在外部函数timer-component中声明它的本地状态，每个组件只调用一次。 Re-frame documentation explains different forms of Reagent components很好。

重新帧文档添加注释在试剂教程的例子中，这可能有助于澄清：

(defn timer-component [] 
    (let [seconds-elapsed (reagent/atom 0)]  ;; setup, and local state 
    (fn []  ;; inner, render function is returned 
     (js/setTimeout #(swap! seconds-elapsed inc) 1000) 
     [:div "Seconds Elapsed: " @seconds-elapsed])))