在改变道具时，试剂组件不会重新渲染。

Question

我的试剂组件是一个简单的div，它有一个简单的功能。component-did-mount 和a component-did-update 钩子。它使用vexflow绘制笔记。

(defn note-bar [notes]
  (reagent/create-class
    {:display-name         "Note Bar"
     :reagent-render       (fn [notes]
                             ^{:key notes}                  ;; force update
                             [:div#note-bar])
     :component-did-mount  (fn [this]
                             (draw-system-with-chord notes))
     :component-did-update (fn [this]
                             (draw-system-with-chord notes))}))

它的使用方法是这样的。

(defn exercise-one []
  (let [note (re-frame/subscribe [:exercise-one/note])]
    [:div
     [note-bar/note-bar @note]
     [other]
     [components]]))

我的事件代码如下。

(defn store-exercise-one-note [db [_ note]]
  (assoc-in db [:exercise-one :note-bar :note] note))

(re-frame/reg-event-db
  :exercise-one/store-note
  store-exercise-one-note)

(defn query-exercise-one-note [db]
  (or (get-in db [:exercise-one :note-bar :note])
      [{:octave 4 :key :c}]))

(re-frame/reg-sub
  :exercise-one/note
  query-exercise-one-note)

我验证了app-db的值是用10x改变的，但是当Hot Reloading启动时，笔记栏只显示不同的笔记。然而，只有当Hot Reloading启动时，笔记栏才会显示不同的笔记。我相信这是由于 component-did-update 钩子没有被调用。

我的问题是，这样绑定一个渲染某个东西的JavaScript库的方式正确吗？如果是，为什么我的组件不更新？

Answer 1

下面固定了这个组件。请参阅关于form-3组件的文档 此处

(defn note-bar [notes]
  (reagent/create-class
    {:display-name         "Note Bar"
     :reagent-render       (fn [notes]
                             ^{:key notes}                  ;; force update
                             [:div#note-bar])
     :component-did-mount  (fn []
                             (draw-system-with-chord notes))
     :component-did-update (fn [this]
                             (let [new-notes (rest (reagent/argv this))]
                               (apply draw-system-with-chord new-notes)))}))