ClojureScript:尝试在重帧应用中呈现FlatList时获取“错误:键必须为整数”

在ClojureScript中使用FlatList组件时遇到“错误:键必须为整数”的问题，通常是因为FlatList期望的key属性值必须是整数类型，而在你的代码中提供的key值不符合这个要求。

基础概念

FlatList是React Native中的一个高性能列表组件，用于渲染大量数据。它通过只渲染屏幕上可见的元素来优化性能。key属性用于帮助React识别哪些项目已经更改、添加或删除。

相关优势

• 性能优化：FlatList只渲染屏幕上可见的部分，而不是整个列表。
• 滚动性能：支持平滑滚动和快速响应。
• 数据动态加载：支持通过onEndReached回调函数实现数据的动态加载。

类型

FlatList主要接受以下类型的属性：

• data：要渲染的数据数组。
• keyExtractor：用于从数据项中提取key值的函数。
• renderItem：用于渲染每个数据项的函数。

应用场景

FlatList适用于需要渲染大量数据列表的场景，如新闻列表、商品列表、聊天记录等。

问题原因

错误“键必须为整数”通常是因为keyExtractor函数返回的值不是整数类型。例如，如果返回的是字符串或其他非整数类型，就会触发这个错误。

解决方法

确保keyExtractor函数返回整数类型的key值。以下是一个示例：

(ns myapp.core
  (:require [reagent.core :as r]
            [reagent.dom :as rd]))

(defn flat-list-example []
  (let [data (range 100)] ; 示例数据
    [r/FlatList
     :data data
     :keyExtractor #(int %) ; 确保返回整数类型的key值
     :renderItem #(r/view [:text (str "Item " %)])]))

(rd/render [flat-list-example] (.getElementById js/document "root"))

在这个示例中，keyExtractor函数使用int将数据项转换为整数类型。

参考链接

• React Native FlatList Documentation

通过确保keyExtractor函数返回整数类型的key值，可以解决“错误:键必须为整数”的问题。