Nie można manipulować kursorem poza fazą renderowania.

Question

Próbujesz zareagować po raz pierwszy i chcę utworzyć prostą aplikację listy zadań do wykonania. Ale za każdym razem, gdy wciskam enter, aby wywołać onSubmit, jest napisane: Uncaught Error: Cannot manipulate cursor outside of render phase, only om.core/transact!, om.core/update!, and cljs.core/deref operations allowed. Chociaż myślę, że jest to bardzo dobry komunikat o błędzie, nie wiem, co robić.

(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}) 

Answer 1

Myślę, że problem polega na tym, że dostęp do data wewnątrz om/transact! gdzie należy działać na v:

(:current v) zamiast (:current data)

lub można spróbować (:current @data) do ostatniej wartości danych

Answer 2

Są to właściwie dwa problemy z:

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

Jednym z nich jest co @edbond powiedział powyżej: powinieneś używać (:current v) zamiast (:current data). Drugi problem polega jednak na tym, że określasz słowo kluczowe :todos, a zamiast tego powinieneś po prostu zmienić samą data, ponieważ :current znajduje się poza pokazanym :todos w pokazanym stanie aplikacji. Tak więc prawidłowe sformułowanie byłoby:

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