React-PDF表格仅表头显示，数据行不渲染问题求助

核心问题 #

你的代码中data.section6DetailsArray.map的回调函数没有返回JSX元素，导致rows数组为空，自然渲染不出数据行。

修复方案 #

修改map回调逻辑，确保返回生成的表格行组件：

const rows = data.section6DetailsArray.map((item, i) => {
  console.log(i); // 保留日志不影响
  // 显式返回JSX元素
  return (
    <View key={item.srNo.toString()} style={styles.tableRow}>
      <Text style={styles.tableRowItem}>{item.srNo}</Text>
      <Text style={styles.tableRowItem}>{item.nameFatherNameCasteAddress}</Text>
      <Text style={styles.tableRowItem}>{item.type}</Text>
      <Text style={styles.tableRowItem}>{item.personType}</Text>
      <Text style={styles.tableRowItem}>{item.sex}</Text>
      <Text style={styles.tableRowItem}>{item.age}</Text>
      <Text style={styles.tableRowItem}>{item.occupation}</Text>
    </View>
  );
});

也可以用箭头函数的隐式返回简化代码（去掉外层大括号）：

const rows = data.section6DetailsArray.map((item, i) => (
  <View key={item.srNo.toString()} style={styles.tableRow}>
    <Text style={styles.tableRowItem}>{item.srNo}</Text>
    <Text style={styles.tableRowItem}>{item.nameFatherNameCasteAddress}</Text>
    <Text style={styles.tableRowItem}>{item.type}</Text>
    <Text style={styles.tableRowItem}>{item.personType}</Text>
    <Text style={styles.tableRowItem}>{item.sex}</Text>
    <Text style={styles.tableRowItem}>{item.age}</Text>
    <Text style={styles.tableRowItem}>{item.occupation}</Text>
  </View>
));

注：原代码中<Text>item.srNo</Text>是硬编码字符串，建议删除避免重复显示序号。

额外优化建议 #

• 确保item.srNo是唯一值，保证key的唯一性；若存在重复，可改用key={row-${i}-${item.srNo}}
• 可把表格行提取为独立组件，提升代码可读性：

const TableRow = ({ item }) => (
  <View key={item.srNo.toString()} style={styles.tableRow}>
    <Text style={styles.tableRowItem}>{item.srNo}</Text>
    <Text style={styles.tableRowItem}>{item.nameFatherNameCasteAddress}</Text>
    <Text style={styles.tableRowItem}>{item.type}</Text>
    <Text style={styles.tableRowItem}>{item.personType}</Text>
    <Text style={styles.tableRowItem}>{item.sex}</Text>
    <Text style={styles.tableRowItem}>{item.age}</Text>
    <Text style={styles.tableRowItem}>{item.occupation}</Text>
  </View>
);

// 调用时简化map逻辑
const rows = data.section6DetailsArray.map(item => <TableRow item={item} />);

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