试剂组件不更新答案

【问题标题】：Reagent component doesn't update试剂组件不更新
【发布时间】：2018-02-24 16:04:02
【问题描述】：

shoppinglist ratom 的 'add' 和 'remove' 项更新了 'shopping-list' 组件，但是 'update'没有。

我使用 cljs REPL 来更新购物清单。

添加：

shopping.app=> (swap! shoppinglist assoc 3 {:id 3, :name "Coke", :price 25})
WARNING: Use of undeclared Var shopping.app/shoppinglist at line 1 <cljs repl>
{1 {:id 1, :name "Bread", :price 23}, 2 {:id 2, :name "Milk", :price 12}, 3 {:id 3, :name "Coke", :price 25}}

删除：

shopping.app=> (swap! shoppinglist dissoc 3)
WARNING: Use of undeclared Var shopping.app/shoppinglist at line 1 <cljs repl>
{1 {:id 1, :name "Bread", :price 20}, 2 {:id 2, :name "Milk", :price 12}}

更新：

shopping.app=> (swap! shoppinglist assoc 2 {:id 2, :name "Milk", :price 8})
WARNING: Use of undeclared Var shopping.app/shoppinglist at line 1 <cljs repl>
{1 {:id 1, :name "Bread", :price 20}, 2 {:id 2, :name "Milk", **:price 8**}}
shopping.app=>

shoppinglist ratom 更新了，我在 REPL 中检查过，但是组件没有更新。

(ns shopping.app
  (:require [reagent.core :as r]))

(defonce shoppinglist (r/atom (sorted-map
                           1 {:id 1 :name "Bread" :price 20},
                           2 {:id 2 :name "Milk" :price 12})))

(defn shopping-item [item]
  (let [{:keys [id name price]} item]
    (fn []
      [:div
        [:label id]
        [:label (str " | " name)]
        [:label (str " | " price)]])))

(defn shopping-list []
  [:div.container
    (for [item (vals @shoppinglist)]
      ^{:key (:id item)} [:div
        [shopping-item item]])])

(defn init
  "Initialize components."
  []
  (let [container (.getElementById js/document "container")]
    (r/render-component 
      [shopping-list] 
      container)))

已编辑 ====================================

我在这里https://github.com/reagent-project/reagent/blob/master/docs/CreatingReagentComponents.md找到了关于组件设计的很好的概述

Form-2：我没有将本地状态放入我的示例中，但我的真实应用程序包含本地状态机。据此，我必须为嵌入式渲染函数设置与组件函数相同的参数。我修改了我的示例，添加了本地状态随机数并参数化渲染函数，它运行良好。

(ns shopping.app
  (:require [reagent.core :as r]))

(defonce shoppinglist (r/atom (sorted-map
                           1 {:id 1 :name "Bread" :price 20},
                           2 {:id 2 :name "Milk" :price 12})))

(defn shopping-item [{:keys [id name price]}]
  (let [loacalstate (r/atom true)]
    (fn [{:keys [id name price]}]
      [:div
        [:label id]
        [:label (str " | " name)]
        [:label (str " | " price)]])))

(defn shopping-list []
  [:div.container
    (for [item (vals @shoppinglist)]
      ^{:key (:id item)} [:div
        [shopping-item item]])])

(defn init
  "Initialize components."
  []
  (let [container (.getElementById js/document "container")]
    (r/render-component 
      [shopping-list] 
      container)))

【问题讨论】：

标签： clojurescript reagent

【解决方案1】：

删除shopping-item 中的内部无参数包装函数。这是不必要的，但会阻止重新渲染现有项目，因为无参数函数看不到更改的参数。

所以：

(defn shopping-item [item]
  (let [{:keys [id name price]} item]
    [:div
     [:label id]
     [:label (str " | " name)]
     [:label (str " | " price)]]))

或

(defn shopping-item [{:keys [id name price]}]
  [:div
   [:label id]
   [:label (str " | " name)]
   [:label (str " | " price)]])

有关更多信息，请查看 form-2 组件的文档：

https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md#form-2--a-function-returning-a-function

【讨论】：