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

Question

我正在尝试创建一个原型 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 进行测试时，页面加载正常。所以，我不确定这里发生了什么。为什么会出现此错误？

Answer 1

您将 (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 下）它会在您的组件呈现时显示。验证它确实是您期望的数据。

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

react-native

clojurescript

re-frame