re-frame应用渲染FlatList时出现「Error: Key must be integer」错误如何解决?
错误原因
你在let绑定中已经对re-frame订阅结果做了解引用:spaces @(rf/subscribe [:get-spaces]),此时spaces本身就是存储所有空间对象的向量。你在FlatList的:data属性中写的是(mapv :title (spaces)),其中(spaces)属于多余的函数调用写法。
Clojure里向量实现了IFn接口,作为函数调用时必须传入整数索引作为参数才能取出对应位置的元素,你没有传任何参数直接执行(spaces),就触发了「Key must be integer」报错。你直接把(mapv :title (spaces))替换为空向量时跳过了这个错误调用,所以页面可以正常加载。
修复方案
按以下要求修改代码即可:
- 去掉
:data属性中spaces外面多余的括号,修改为(mapv :title spaces) renderItem回调内的显示内容改回注释掉的(. item -item),你当前写的(str item)会把整个回调参数对象转成字符串输出,无法正常展示标题- 补充
:keyExtractor属性,避免后续出现列表项无唯一key的React Native原生警告
修复后的FlatList代码示例:
[:> rn/FlatList {:data (mapv :title spaces) :keyExtractor (fn [item index] (str index)) :renderItem (fn [item] (r/as-element [:> rn/Text {:style {:font-weight :normal :font-size 15 :color :black}} (str (. item -item))]))}]
内容的提问来源于stack exchange,提问作者Ashour Badine
相关产品推荐
相关产品推荐

