This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-01-24
Channels
- # announcements (4)
- # beginners (37)
- # boot (13)
- # boot-dev (3)
- # calva (122)
- # cider (16)
- # clara (13)
- # cljs-dev (3)
- # cljsrn (8)
- # clojure (311)
- # clojure-denver (1)
- # clojure-dev (14)
- # clojure-europe (7)
- # clojure-italy (36)
- # clojure-nl (3)
- # clojure-spec (11)
- # clojure-uk (77)
- # clojurescript (91)
- # core-async (10)
- # cursive (9)
- # data-science (5)
- # datomic (46)
- # devcards (2)
- # emacs (6)
- # figwheel-main (15)
- # fulcro (51)
- # jobs (3)
- # kaocha (10)
- # nrepl (6)
- # off-topic (53)
- # om (1)
- # onyx (2)
- # pathom (5)
- # reagent (50)
- # reitit (26)
- # shadow-cljs (153)
- # spacemacs (17)
- # specter (5)
- # speculative (1)
- # test-check (19)
- # tools-deps (15)
- # yada (3)
Is there a pattern for doing something upon mounting of a component, and then again each time that component receives arguments that were different from the last time? What I want is for a page to load its data from the backend the first time the user visits it, and then subsequently each time they stay on the page (no remounting), but change the arguments (id of what they want to look at).
I thought I could use a lifecycle hook with reagent/create-class
, I’ve tried with
:component-will-update
(fn [component [_ & [{:keys [entity-id] :as routeparams} :as new-args]]]
(let [old-args (reagent/children component)]
(when (not= new-args old-args)
(prn "reloading page state!")
(populate-page-state entity-id))))})
, but it doesn’t feel solid.Hm, maybe it is though. It seems to work for reloading upon new args, and then I just have to set up initial load with the form 2 pattern.
So, something like this
:reagent-render
(fn [{:keys [entity-id] :as routeparams}]
(populate-page-state entity-id) ;; load on first visit
(fn [{:keys [entity-id] :as routeparams}]
[actual-component … ]))
:component-will-update
(fn [component [_ & [{:keys [entity-id] :as routeparams} :as new-args]]]
(let [old-args (reagent/children component)]
(when (not= new-args old-args)
(prn "reloading page state!")
(populate-page-state entity-id))))}) ;; load on same-page argument changes
I think you’re approaching this from the wrong end though. Why not fetch the data from the place the user is selecting what they want to do (presumably a function you already wrote)
orestis is right. In raw React (and esp. with the new Hooks API), your approach might be OK. but with reagent, it will be difficult
@reefersleep I would store the state of the user’s data in an atom somewhere and update that on each event that would change the props
@orestis @lilactown cheers for the feedback 🙂 I think I’m a fan of more explicit state updates at the site of user interaction, as well.
If you look at the following cljsjs definition can you tell how to implement the component? https://github.com/cljsjs/packages/blob/master/react-json-view/resources/cljsjs/react-json-view/common/react-json-view.ext.js
I’ve been trying the following
[:> js/reactJsonView {:src ""
:indentWidth 2
:collapsed @collapsed}]
but it’s just complaining Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.@jeremy642 from those generated externs I guess it should be js/reactJsonView.default
@thheller Thanks. When I try that i get React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
check if it has a .default
property? (CLJS may be incorrectly munging default
to default$
)
@jeremy642 try [:> (goog.object/get js/reactJsonView "default") ...]
Or you can always use the built-in aget
instead of yet another dependency
Didn't know that, thanks. Still would save an extra require line if you care.
So I see what you're saying now, but then can you explain this?
:primary {:main (aget (.-teal mui-colors) 500)
:dark "#1976d2"}
That works just fine, but the examples for how to use "@material-ui/core/colors" is to use goog.object/get
. So what's actually going on here?
doesn't mean it always will. eg. https://clojurescript.org/news/2017-07-14-checked-array-access
Ah, ok. Makes sense
default
used to be a reserved name in JS so the compiler used to rename it to default$
to avoid using the reserved name
How do you guys handle the fact that modern JS features don't work on IE/Edge and you made this fancy React (reagent) site, but it doesn't display correctly at all on those awful browsers that there are people out there crazy enough to use them?