React Native FlatList组件data属性传值类型不匹配报错问题

报错是FlatList的data属性传值类型错误导致的：

• FlatList组件的data属性要求传入数组类型的数据源，组件内部依赖数组的迭代方法完成列表渲染
• 你标注问题的位置传入的letter是外层数组遍历时拿到的单个对象，结构为{ id: string; name: string; data: string[]; description: string[] }，不属于数组类型，缺失数组自带的length/concat/join等内置方法，因此TS类型校验直接抛出匹配失败的错误。

除了触发报错的传值错误，你的代码还有几个会导致运行异常的问题：

• React Native运行环境不支持Web端的div标签，直接写会报原生组件不存在的错误
• 你在letter.data?.map的循环内部渲染FlatList，会导致同一个数据源重复渲染多个FlatList实例，造成性能浪费和渲染异常
• 外层map的回调参数命名和外层数据源letter重名，存在变量遮蔽问题，容易引发逻辑错误
• 外层遍历生成的View节点没有设置key属性，会触发React的遍历渲染警告

<View style={{ flex: 10}}>
  {letter.map((letterItem) => {
    const isLetterHasData = letterItem.data?.length > 0;

    if (!isLetterHasData) {
      return null;
    }
    return (
      <View
        key={letterItem.id}
        style={{
          flex: 1,
          flexDirection: "row",
        }}
      >
        {/* 替换RN不支持的div为View组件 */}
        <View
          ref={fieldRef}
          style={{
            marginBottom: 100,
          }}
        >
          <Text
            style={{
              fontSize: 90,
            }}
          >
            {letterItem.name}
          </Text>
        </View>

        {total !== same ? (
          <FlatList
            // 传入正确的数组类型数据源
            data={letterItem.data}
            numColumns={2}
            keyExtractor={(_, index) => index.toString()}
            renderItem={({ item, index }) => {
              return (
                <View>
                  <Text>{letterItem.description[index]}</Text>
                </View>
              );
            }}
          />
        ) : null}
      </View>
    );
  })}
</View>

• 将FlatList的data传值改为数组类型的letterItem.data，完全匹配组件入参要求，直接解决TS类型报错
• 将不兼容的div标签替换为RN原生支持的View组件，避免运行时组件错误
• 移除多余的letter.data.map嵌套循环，每个字母分类只渲染一个FlatList实例，避免重复渲染
• 调整外层map回调参数名为letterItem，解决和外层数据源重名的变量遮蔽问题
• 给外层遍历的根节点增加key属性，消除React遍历渲染警告

内容的提问来源于stack exchange，提问作者Louis