ClojureScript：嘗試在重新框架應用程序中呈現 FlatList 時出現“錯誤：鍵必須是整數”

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"}]
     ]
    )
  )

我在這里遇到的問題是，在頁面加載時，我收到一條錯誤消息“密鑰必須是整數”。 我推斷問題是由FlatList的:data值(mapv:title (spaces))引起的。 但是，我不知道為什么會這樣。 根據我從網上調查中發現的情況，當向量試圖被數字以外的東西訪問時，就會發生這種情況，即(myVector someExpNotNumber) 。 但在這種情況下，這對我來說毫無意義，因為(mapv:title (spaces))應該在頁面加載時評估為一個空向量，當我直接替換一個空向量來測試時，頁面加載正常。 所以，我不確定這里發生了什么。 為什么會發生此錯誤？

Answer 1

您將(spaces)稱為 function 但它實際上是 function？ 如果它實際上是您只需要的向量(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 下）它會在你的組件被渲染時出現。 驗證它確實是您預期的數據。