I’m getting an “encountered children with the same key ‘null’, with the following code:
(defn video-comp [video]
[:> View {:key (get video "uri")}
[:> Video
{:style {:height 400
:width "100%"}
:controls true
:paused true
:source {:uri (str "<https://d211alragp6msc.cloudfront.net/>" (get video "uri"))}}]
#_[:> Text {:style {:fontSize 20}} (get video "name")]
#_[:> Text (get video "description")]])
(defn home []
(dispatch [:load-videos])
[:> SafeAreaView {:marginBottom 100}
[:> Button {:title "Refresh" :onPress #(dispatch [:load-videos])}]
[:> FlatList {:data @(subscribe [:videos])
:renderItem (fn [item] (r/as-element [video-comp (get (js->clj item) "item")]))
:keyExtractor (fn [item] (-> (get (js->clj item) "item")
(get "uri")))}]
[google-signout-comp {:key :signout}]])
I don’t use map in this code so I don’t understand why the code will complain about children with the same key null. I don’t know what children the warning message refers to. I’ve tried adding keys to the video-comp component as shown, to no avail. How to fix this warning?@ps The message come from the :keyExtractor
line in your home component.
Tried something like that:
...
:keyExtractor (fn [item] (str (get-in (js->clj item) ["item" "uri"])))}]
...
How is it different from what I have already?
@admin055 i tried this but I still get the warning
First, ii use get-in
to access nested map instead thread marco + get
and second it converts the result in string with str
.
Please, print out the item object and paste the result here with
...
:keyExtractor (fn [item] (js/console.log item)))}]
...
Or more directly, copy/paste the state return by @(subscribe [:videos])
You can remove your video-comp :key
line.
@ps Take a look here: https://github.com/raspasov/alexandria-clj/blob/a68ef10ca1104d9f74380265818cb22fd328499c/src/ax/react_native/virtualized_list.cljs Specifically, :getItem and :keyExtractor I prefer to use VirtualizedList directly, because it allows to use custom data sources (like ClojureScript’s immutable vectors) directly without transformation. It does require a bit of setup initially but works well afterwards.
@raspasov I don’t understand, clojurescript data structures can be passed into flatlist as well in the :data key
in any case is there a way to get rid of the warning using a flatlist?
@ps The :key-extractor
in my FlatList
is (comp str :uuid cljify)
where cljify
is (js->clj % :keywordize-keys true)