为什么试剂不会在状态更改时重新呈现我的试剂表格

Question

我需要创建一个包含选择字段的表单，其中的选项取决于当前可用的邮件帐户。页面加载后，我在 API 请求中检索这些邮件帐户。

以下函数使用选择元素创建表单。

(defn create-options [mail-accounts]
  (for [m mail-accounts]
    [:option {:key (keyword (str (:id m)))
              :value (:id m)}
     (:name m)]))

(defn render-mail-account-select [mail-accounts]
  (let [form-state (r/atom {})]
    (fn [mail-accounts]
      (let [form [:form.mailing-form.form-horizontal
                  (into [:select.form-control {:field :list :id :mail-account}]
                        (create-options mail-accounts))]]
        (pprint form)
        [bind-fields form form-state]))))

pprint 给了我以下输出：

;; Before the mail-accounts are loaded
[:select.form-control {:field :list, :id :mail-account}]

;; After the state update containing the mail accounts
[:select.form-control
 {:field :list, :id :mail-account}
 [:option {:key :24, :value 24} "First mail account name"]
 [:option {:key :25, :value 25} "Second mail account name"]]

我的问题是我页面上的选择保持为空，好像选择没有重新呈现一样。

附录

我想我忘了添加一些代码： 我将此表单包装在一个 KIOO 组件中，我在其中取消引用我的 state 原子。

(defsnippet choose-account-panel "html/static-panel.html" [:div.panel]
  []
  {[:h4.panel-title] (content "3. Mail Account wählen")
   [:div.panel-body] (content [render-mail-account-select (:mail-accounts @state)])})

该组件然后调用我的render-mail-account-select 函数并应正确重新呈现表单。

Answer 1

您需要取消对 Ratom for Reagent 的引用，以了解当该 Ratom 更改时需要再次调用哪些函数。取消引用需要在 render-mail-account-select 内的匿名函数或它调用的函数之一中发生。我在这里看不到任何取消引用？

有关 Reagent 渲染的更多详细信息，请参阅文档 here。

Answer 2

正如已经指出的，您的渲染函数必须引用状态原子中的某些内容，以便知道何时需要重新渲染。但是，如果您还希望显示的表单选择“默认”值，则还需要设置状态原子。

绑定字段调用会将您的表单与状态原子相关联。如果状态原子中没有任何内容，则表单将为“空白”，即没有选择任何元素。如果这是你想要的，那应该没问题。但是，如果您想要选择一个值，那么您应该将该值放入原子中。例如，如果您希望第一项已被选中，则将 :24 放入状态原子，即

(swap! form-state assoc :mail-account :24)

请注意，我不确定您的选项定义是否正确。文档似乎表明您只需要 :key 属性和该属性中的值（作为关键字）。我没有查看源代码来确认这一点，但没有一个示例也使用 :value 属性。

如果您在渲染函数的开头进行交换，那么状态原子将被引用，并且您的组件应在每次使用新参数调用时重新渲染。当我说“渲染函数”时，在这种情况下，我指的是匿名函数，而不是创建状态原子的外部函数。