Kann den Cursor nicht außerhalb der Render-Phase manipulieren

Question

Versuchen, zum ersten Mal reagieren, und ich möchte eine einfache Todo-Liste App machen. Aber jedes Mal, wenn ich Enter drücke, um onSubmit auszulösen, heißt es Uncaught Error: Cannot manipulate cursor outside of render phase, only om.core/transact!, om.core/update!, and cljs.core/deref operations allowed. Während ich denke, dass dies eine sehr gute Fehlermeldung ist, weiß ich nicht, was zu tun ist.

(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

ich glaube, das Problem ist, wo Sie data innen om Zugangs-/Transaktions! wo sollten Sie auf v arbeiten:

(:current v) statt (:current data)

oder können Sie (:current @data) für jüngste Wert der Daten

Answer 2

Es gibt zwei Probleme mit versuchen:

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

One ist Was @edbond sagte oben: Sie sollten (:current v) anstatt (:current data) verwenden. Das andere Problem ist jedoch, dass Sie das Schlüsselwort :todos angeben, und stattdessen sollten Sie einfach data selbst ändern, da :current außerhalb von :todos in Ihrem App-Zustand angezeigt wird. So ist die korrekte Formulierung wäre:

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