ClojureScript: Getting "Error: Key must be integer" when trying to render a FlatList in a re-frame app

ClojureScript: Getting "Error: Key must be integer" when trying to render a FlatList in a re-frame app

我正在尝试创建一个原型 SPA,它由一个带有两个字段(标题和描述)的表单和一个提交按钮组成。提交时,提交标题将添加到正在显示的项目列表中(我将其建模为 React Native FlatList)。

为此,我使用 PEZ 创建的用于 React Native 开发的模板:https://github.com/PEZ/rn-rf-shadow。这使用了 React Native、Expo、Reagent 和 re-frame.

这里的问题出在 FlatList 组件上。这是我的结构:

[:> rn/FlatList {:data (mapv :title (spaces))
                 :renderItem (fn [item]
                    (r/as-element
                       [:> rn/Text {:style {:font-weight :normal
                                            :font-size 15
                                            :color :black}} (str (. item -item))]))}]

spaces 是试剂反应。为了上下文,这里是完整的根定义:

(defn root []
  (let [space-definition (r/atom {})
        spaces @(rf/subscribe [:get-spaces])]
    [:> rn/View {:style {:flex 1
                         :padding-vertical 50
                         :justify-content :space-between
                         :align-items :center
                         :background-color :white}}
     [:> rn/View {:style {:align-items :center}}
      [:> rn/TextInput {:style {:font-size     16
                                :margin-bottom 20
                                :border "1px solid black"
                                :padding 5}
                        :on-change-text #(swap! space-definition assoc :title %)}]
      [:> rn/TextInput {:style {:font-size     16
                                :margin-bottom 20
                                :border "1px solid black"
                                :padding 5
                                :width 500
                                :height 200}
                        :multiline true
                        :on-change-text #(swap! space-definition assoc :description %)}]
      [:> rn/Button {:title "Submit"
                     :on-press #(rf/dispatch [:add-space @space-definition])}]
      [:> rn/FlatList {:data (mapv :title (spaces))
                       :renderItem (fn [item]
                                     (r/as-element
                                      [:> rn/Text {:style {:font-weight :normal
                                                           :font-size 15
                                                           :color :black}} (str item);;(str (. item -item))
                                       ]))}]
      ]
     [:> StatusBar {:style "auto"}]
     ]
    )
  )

我遇到的问题是,在页面加载时,我收到一条错误消息“Key must be integer”。我推断问题是由 FlatList(mapv :title (spaces)):data 值引起的。但是,我不知道这是为什么。根据我在网上调查发现的情况,当一个向量试图被数字以外的东西访问时,就会发生这种情况,即 (myVector someExpNotNumber)。但在这种情况下,这对我来说毫无意义,因为 (mapv :title (spaces)) 应该在页面加载时评估为一个空 Vector,当我直接替换一个空 Vector 进行测试时,页面加载正常。所以,我不确定这里发生了什么。为什么会出现此错误?

您将 (spaces) 作为函数调用,但它实际上是一个函数?如果它实际上是一个向量,你只需要 (mapv :title spaces)?

shadow-cljs 提供 Inspect 以快速验证您是否确实在处理您认为正在处理的数据。例如你可以做类似

的事情
(defn root []
  (let [space-definition (r/atom {})
        spaces @(rf/subscribe [:get-spaces])]
    (tap> [:spaces spaces])
    ...
    ))

然后在 UI(默认在 http://localhost:9630/inspect 下)它会在您的组件呈现时显示。验证它确实是您期望的数据。