5

初めてreactに挑戦するので、シンプルなtodoリストアプリを作りたいと思っています。しかし、Enter キーを押してトリガーするたびに、onSubmitと表示されますUncaught Error: Cannot manipulate cursor outside of render phase, only om.core/transact!, om.core/update!, and cljs.core/deref operations allowed。これは非常に良いエラー メッセージだと思いますが、どうすればよいかわかりません。

(ns app.core
  (:require [om.core :as om :include-macros true]
            [sablono.core :as html :refer-macros [html]]))

(def app-state (atom
                {:todos [{:todo "first"}
                         {:todo "second"}]
                 :current ""}))

(defn to-do
  [data]
  (om/component
   (html [:li (:todo data)])))

(defn to-dos
  [data]
  (om/component
   (html [:div
          [:form {:on-submit (fn [e]
                               (.preventDefault e)
                               (om/transact! data :todos (fn [v]
                                                           (js/console.log (:current data))
                                                           (conj v (:current data)))))}
           [:input {:type "text" 
                    :placeholder "Enter some text."
                    :on-change (fn [e] (om/update! data :current (.. e -target -value)))}]]
          [:ul 
          (om/build-all to-do (:todos data))]])))

(om/root to-dos app-state {:target js/document.body})
4

2 に答える 2

4

data問題は、 om/transact 内のどこにアクセスするかだと思います! 操作する必要がある場所v:

(:current v)それ以外の(:current data)

(:current @data)または、データの最新の値を試すことができます

于 2014-07-03T12:57:26.190 に答える
1

実際には次の 2 つの問題があります。

(om/transact! data :todos (fn [v]
  (js/console.log (:current data))
  (conj v (:current data)))))

(:current v)1 つは、@ edbondが上で言ったことです(:current data)。ただし、他の問題は、:todosキーワードを指定していることです。代わりに、表示されているアプリの状態の外にあるdataため、単にそれ自体を変更する必要があります。したがって、正しい定式化は次のようになります。:current:todos

(om/transact! data (fn [v]
  (js/console.log (:current v))
  (conj v (:current v)))))
于 2015-04-19T03:45:24.553 に答える