重启！在试剂原子上没有按预期工作答案

【问题标题】：reset! on reagent atom doesn't work as intended重启！在试剂原子上没有按预期工作
【发布时间】：2019-12-17 14:14:04
【问题描述】：

所以我要做的是使用 re-com 的水平选项卡元素的基本选项卡式视图。我添加了一个 v-box 元素，在它下面我想要我的选项卡元素和与选项卡对应的正文。虽然在 :on-change 我叫重置！在水平选项卡的模型上，它似乎不起作用。

(defn left-panel []
  [re-com/box
   :size "auto"
   :child (let [selected-tab-id (r/atom (:id (first left-panel-tabs-definition)))
                change-tab #(reset! selected-tab-id %)]
            [re-com/v-box
             :children [[re-com/horizontal-tabs
                         :model selected-tab-id
                         :tabs left-panel-tabs-definition
                         :on-change change-tab]
                        [(left-panel-tabs @selected-tab-id)]
                        ]])])

(defn forms-view []
  [:div "Forms View"])

(defn swagger-view []
  [:div "Swagger View"])

(def left-panel-tabs
  {::swagger #'swagger-view
   ::forms #'forms-view})

(def left-panel-tabs-definition
  [{:id ::forms
    :label "Forms"
    :say-this "Forms View"}
   {:id ::swagger
    :label "Swagger"
    :say-this "Swagger View"}])

如果不是

[(left-panel-tabs @selected-tab-id)]

我做了类似的事情

(do (log @selected-tab-id) [(left-panel-tabs @selected-tab-id)])

它总是会打印我在开始时设置的试剂原子的值（在本例中为 ::forms）

【问题讨论】：

@selected-tab-id 在您的 change-tab 被调用之前运行。或者换句话说，您在调用 reset! 之前设置它。如果你想改变它，你可能需要在更改监听器中设置它（尽管我以前从未使用过试剂）。

标签： clojurescript reagent re-frame

【解决方案1】：

感谢 reddit 上的 u/Galrog，我意识到为了让它工作，我需要创建一个 Form-2 组件（创建组件的 3 种形式http://reagent-project.github.io/docs/master/CreatingReagentComponents.html#the-three-ways）

将我的左面板组件更改为 Form-2 组件会在原子更改时重新渲染两个子组件

代码：

(defn left-panel []
  (let [selected-tab-id (r/atom (:id (first left-panel-tabs-definition)))
        change-tab #(reset! selected-tab-id %)]
    (fn []
      [re-com/box
       :size "auto"
       :child [re-com/v-box
               :children [[re-com/horizontal-tabs
                           :model selected-tab-id
                           :tabs left-panel-tabs-definition
                           :on-change change-tab]
                          [(left-panel-tabs u/selected-tab-id)]]]])))

【讨论】：