React Native Paper Datatable移入自定义组件后行数据不显示问题

问题根因 #

1. 遍历渲染时错误使用forEach方法：forEach仅遍历数组无返回值，因此JSX中无法获取到生成的表格组件，导致内容为空。React中动态渲染列表必须使用map方法返回JSX数组。
2. 表格体未遍历所有行数据：原BodySection仅遍历了单个对象的字段生成单元格，没有遍历props.items的所有条目生成多行表格，最多只能渲染一行数据。
3. 单元格内容取值错误：原BodySection中单元格内容写为{key}，只会输出字段名，无法输出对应行的实际字段值。
4. 未给循环生成的元素加唯一key属性，会触发React渲染警告。
5. 分页配置写死：原分页参数numberOfPages固定为1，数据量大时分页功能无法正常工作。

修正后的完整代码 #

import React, {useEffect} from 'react';
import type {Node} from 'react';
import {View, ScrollView, Text, StyleSheet} from 'react-native';
import {DataTable as PaperDataTable} from 'react-native-paper';

const DataTable = props => {
  const optionsPerPage = [2, 3, 4];
  const [page, setPage] = React.useState(0);
  const [itemsPerPage, setItemsPerPage] = React.useState(optionsPerPage[0]);
  useEffect(() => {
    setPage(0);
  }, [itemsPerPage]);

  const HeaderSection = (): Node => {
    if (props.items.length === 0) {
      return null;
    }
    return (
      <PaperDataTable.Header>
        {Object.keys(props.items[0]).map(key => {
          if (key !== 'Id') {
            return (
              <PaperDataTable.Title key={key} style={styles.allCell}>
                {key}
              </PaperDataTable.Title>
            );
          }
          return null;
        })}
      </PaperDataTable.Header>
    );
  };

  const BodySection = (): Node => {
    // 先遍历所有行数据，再遍历每行的字段生成单元格
    return props.items
      .slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage)
      .map(item => (
        <PaperDataTable.Row key={item.Id}>
          {Object.keys(item).map(key => {
            if (key !== 'Id') {
              return (
                <PaperDataTable.Cell key={key} style={styles.allCell}>
                  {item[key]}
                </PaperDataTable.Cell>
              );
            }
            return null;
          })}
        </PaperDataTable.Row>
      ));
  };

  return (
    <ScrollView style={styles.tableHolder}>
      <ScrollView horizontal={true}>
        <View style={{alignItems: 'center'}}>
          <PaperDataTable style={styles.table}>
            <HeaderSection />
            <BodySection />
            <PaperDataTable.Pagination
              page={page}
              numberOfPages={Math.ceil(props.items.length / itemsPerPage)}
              onPageChange={p => setPage(p)}
              optionsPerPage={optionsPerPage}
              itemsPerPage={itemsPerPage}
              setItemsPerPage={setItemsPerPage}
              showFastPagination
              optionsLabel={'Rows per page'}
            />
          </PaperDataTable>
        </View>
      </ScrollView>
    </ScrollView>
  );
};
const styles = StyleSheet.create({
  tableHolder: {},
  table: {
    paddingLeft: 50,
    paddingRight: 50,
    flex: 1,
  },
  allCell: {
    marginRight: 20,
  },
});

export {DataTable};

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