多面板重构未按预期工作

Question

我有以下重构代码：

;;sub
(reg-sub
 :active-panel
 (fn [db]
   (:active-panel db)))

;;event
(reg-event-db
 :active-panel
 (fn [db [_ new-panel]]

   (assoc db :active-panel new-panel)
   ))

(defn another []
  (fn []
    [:div

     [:p "another"]

     ]
    )
  )

(defn main []
  (fn []
    [:div
     [button {:label "Button"
              :on-click #(dispatch [:active-panel :another])
              }]
     ]
    ))

(defmulti panels identity)
(defmethod panels :main [] [main])
(defmethod panels :another [] [another])
(defmethod panels nil [] [:p "nil"])
(defn main-panel []
  (let [active-panel (subscribe [:active-panel])]
    (fn []
      (panels @active-panel))))

基本上，主（默认）面板中有一个按钮，单击该按钮时应该会到达 :another 面板，但它会在“nil”面板和 :another 面板之间闪烁。我做错了什么？

Answer 1

您的示例代码似乎正确。当 Re-Frame 应用程序闪烁时，大多数情况下是由意外调度引起的。看看这两个例子：

;; Correct
[:button {:on-click #(js/alert "I got clicked")}
  "Click me"]

;; Incorrect
[:button {:on-click (js/alert "I got clicked")} ;; notice the missing `#`
  "Click me"]

如果您的 javascript 事件处理程序不是函数，它会在组件呈现时立即评估，从而触发效果。 如果它dispatch 某个事件，您可以创建一个循环，使您的应用在组件呈现时闪烁。

由于您的示例代码对我来说似乎是正确的，我建议您在源代码中搜索此类错误。