如何基于状态数量而非数据数组，用FlatList渲染重复组件？

FlatList的data属性确实只接受数组，你只需要把表示卡片数量的状态变量转换成对应长度的数组即可实现需求，具体修改如下：

修改后的完整代码 #

import { useState, FlatList } from 'react-native';
import Card from './你的Card组件路径';

// 组件内部逻辑
const [numberOfCards, setNumberOfCards] = useState(1);

return (
  <FlatList
    horizontal
    pagingEnabled
    showsHorizontalScrollIndicator={false}
    // 将数字转换为对应长度的数组，作为FlatList的数据源
    data={Array.from({ length: numberOfCards })}
    // 为每个列表项设置唯一key，避免渲染警告
    keyExtractor={(item, index) => index.toString()}
    renderItem={({ index }) => {
      // 若需要给不同卡片传递差异化数据，可借助index区分
      return <Card key={index} />;
    }}
  />
);

关键说明 #

• Array.from({ length: numberOfCards })会生成一个长度等于numberOfCards的数组，数组元素为undefined，足够FlatList识别需要渲染的项数。你也可以用new Array(numberOfCards).fill(null)达到同样效果。
• keyExtractor是FlatList的必填属性（若列表项没有自带唯一id），这里用index作为唯一标识即可。
• 如果需要给每张卡片设置不同内容，可以利用index参数来传递差异化的props。

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