This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-12-15
Channels
- # adventofcode (39)
- # aws (1)
- # beginners (39)
- # boot (1)
- # calva (79)
- # cider (8)
- # cljdoc (13)
- # cljs-dev (45)
- # clojure (89)
- # clojure-berlin (2)
- # clojure-europe (1)
- # clojure-uk (1)
- # clojurescript (7)
- # datomic (1)
- # emacs (6)
- # figwheel-main (2)
- # fulcro (29)
- # hyperfiddle (21)
- # juxt (1)
- # leiningen (1)
- # lumo (3)
- # music (1)
- # off-topic (20)
- # pedestal (23)
- # portkey (3)
- # reagent (2)
- # rum (1)
- # shadow-cljs (27)
- # vim (5)
Ask a question: In a js project:
<Map zoom={3} center={this.mapCenter}>
<Polygon path={this.state.polygonPath}>
<PolyEditor
active={this.state.polygonActive}
/>
</Polygon>
</Map>
is OK.
But why in a fulcro/shadow-cljs project it will crash:
(def ui-amap (component-factory Map))
(def ui-amap-polygon (component-factory Polygon))
(def ui-amap-polyeditor (component-factory PolyEditor))
(ui-amap {:zoom 12.5 :center map-center}
(ui-amap-polygon {:path polygon-path}
(ui-amap-polyeditor {:active true})))
with the error :
react.development.js:126 Uncaught Error: React.Children.only expected to receive a single React element child.
at invariant (react.development.js:126)
at Object.only (react.development.js:1263)
at Polygon.value (index.js:178)
at Polygon.value (index.js:190)
at finishClassComponent (react-dom.development.js:14302)
at updateClassComponent (react-dom.development.js:14265)
at beginWork (react-dom.development.js:15083)
at performUnitOfWork (react-dom.development.js:17821)
at workLoop (react-dom.development.js:17861)
at HTMLUnknownElement.callCallback (react-dom.development.js:150)
(edited)I figured http://out.It is my factory function. I should use js/React.createElement instead of dom/create-element.
(defn component-factory [component]
(fn [props & children]
(apply dom/create-element component (clj->js props) children)))
(defn component-factory [component]
(fn [props & children]
(apply js/React.createElement component (clj->js props) children)))
has anyone used getDerivedStateFromError
with fulcro?
I tried doing this
(defprotocol IErrorHandling
(getDerivedStateFromError [error]))
(defsc Foo [this props]
{:protocols (Object
static IErrorHandling
(getDerivedStateFromError [error]
{:has-error true}))}
"test")
but i’m getting a complier exception
@currentoor defsc
already supports it, from the docs: :getDerivedStateFromProps (fn [props state] ...)
;; ADDED for React 16:
:componentDidCatch (fn [error info] ...)
:getSnapshotBeforeUpdate (fn [prevProps prevState] ...)
:getDerivedStateFromProps (fn [props state] ...)
lol i couldn’t find it in the book, thanks!
it did seem like something that should be built in 😅
remember to check the source docs, they usually have good things 😉
and are the most updated usually
i tried to search the repo on github but maybe that was just github search being sucky
@wilkerlucio that’s getDerivedStateFromProps
not getDerivedStateFromError
are they the same?
not sure
but if you need some extra that's not in the list you should use the Object protocol to add
I tried that but it wasn’t working
(defsc Foo [this props]
{:protocols (Object
(getDerivedStateFromError [this error]
{:has-error true}))}
"test")
I think
oh Object is the protocol
that puts it on the instance
whereas i need it to be static
i’ll try prepending static
@wilkerlucio i tried this
(defsc Foo [this props]
{:protocols (static Object
(getDerivedStateFromError [this error]
{:has-error true}))}
"test")
but react is still giving me this warning Warning: ucv.ui.order-flow.refunds.ui/OrderRefund: getDerivedStateFromError() is defined as an instance method and will be ignored. Instead, declare it as a static method.
not sure how to add that, but if it's a method on the class you can try to hack with: (gobj/set Foo "getDerivedStateFromError" (fn [error] ...))
such hack wow lol
no luck 🙁
and seeing how @tony.kay did it in fulcro, seems like it won’t be that straightforward
#?(:clj
(defn- make-static-lifecycle [options]
(when (contains? options :getDerivedStateFromProps)
(let [lambda (get options :getDerivedStateFromProps)]
['static 'field 'getDerivedStateFromProps `(fn [p# s#]
(let [fp# (goog.object/get p# "fulcro$value")
fs# (goog.object/get s# "fulcro$state")
new-state# (merge fs# (~lambda fp# fs#))]
(cljs.core/js-obj "fulcro$state" new-state#)))]))))