ClojureScript：尝试在重新构建应用程序中呈现平面列表时获得"Error: Key must be integer"

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、(mapv :title (spaces))的:data值引起的。然而，我不知道为什么会这样。根据我在网上调查中发现的情况，当矢量试图被数字以外的东西访问时，也就是(myVector someExpNotNumber)，就会发生这种情况。但在这种情况下，这对我来说毫无意义，因为(mapv :title (spaces))应该在页面加载时计算为空向量，并且当我直接替换空向量来测试时，页面加载良好。所以，我不确定这里发生了什么。为什么会发生这种错误？

Answer 1

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

shadowcljs提供了Inspect，可以快速验证您是否真的在处理您认为正在处理的数据。例如，你可以做一些类似的事情

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

然后在UI中(默认情况下http://localhost:9630/inspect)无论何时渲染组件，它都会显示出来。验证它是否确实是您期望的数据。