TypeScript中如何循环遍历对象数组并渲染？React Native实现疑问

一、for循环实现 #

先创建空数组存储JSX元素，通过for循环遍历数据数组，将每个对象对应的渲染元素推入数组，最后返回该数组即可。

示例代码：

// 定义数据类型
type ListItem = {
  id: string;
  title: string;
  description: string;
};

// 模拟数量不固定的对象数组
const listData: ListItem[] = [
  { id: "item1", title: "第一项", description: "内容1" },
  { id: "item2", title: "第二项", description: "内容2" },
  // 可动态添加更多项
];

function DynamicList() {
  const renderedItems: JSX.Element[] = [];
  
  // 普通for循环遍历
  for (let i = 0; i < listData.length; i++) {
    const item = listData[i];
    renderedItems.push(
      <View key={item.id} style={{ padding: 12, borderBottomWidth: 1 }}>
        <Text style={{ fontSize: 16, fontWeight: "600" }}>{item.title}</Text>
        <Text style={{ fontSize: 14, color: "#666", marginTop: 4 }}>{item.description}</Text>
      </View>
    );
  }

  return <View>{renderedItems}</View>;
}

二、for-in循环实现 #

注意：for-in是为遍历对象属性设计的，用于数组时必须加hasOwnProperty判断，避免遍历到原型链上的额外属性。

示例代码：

function DynamicListWithForIn() {
  const renderedItems: JSX.Element[] = [];
  
  for (const index in listData) {
    // 确保只遍历数组自身的元素
    if (listData.hasOwnProperty(index)) {
      const item = listData[index];
      renderedItems.push(
        <View key={item.id} style={{ padding: 12, borderBottomWidth: 1 }}>
          <Text style={{ fontSize: 16, fontWeight: "600" }}>{item.title}</Text>
          <Text style={{ fontSize: 14, color: "#666", marginTop: 4 }}>{item.description}</Text>
        </View>
      );
    }
  }

  return <View>{renderedItems}</View>;
}

三、更优解决方案：数组map方法 #

这是React Native中最常用的渲染方式，代码更简洁，符合函数式编程风格，无需手动维护临时数组：

function DynamicListWithMap() {
  return (
    <View>
      {listData.map((item) => (
        <View key={item.id} style={{ padding: 12, borderBottomWidth: 1 }}>
          <Text style={{ fontSize: 16, fontWeight: "600" }}>{item.title}</Text>
          <Text style={{ fontSize: 14, color: "#666", marginTop: 4 }}>{item.description}</Text>
        </View>
      ))}
    </View>
  );
}

关键注意事项 #

• 必须加key属性：每个渲染的子元素需要唯一的key，优先使用数据自带的唯一ID（如示例中的item.id），不要用数组索引当key（除非数组完全静态且不会排序/增删），否则会导致渲染性能问题和状态异常。
• 异步数据处理：如果数组是异步获取的，要先判断数组是否存在，比如用可选链listData?.map(...)避免空指针错误。
• for-in不推荐用于数组：for-in会遍历所有可枚举属性，包括原型链上的属性，所以数组遍历优先用for循环或map方法。

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