将片段移动到组件后，React Native Datatable 不显示

Question

我创建了以下组件。 React Native Paper 数据表行在将其移动到组件并将其链接到 json 循环后未显示。

如果我们评论“并取消评论下面的评论块，您将看到正在显示数据表。我的两个组件做错了什么？我已经完成了所有 console.log。所有数据都正确显示但是 JSX 元素没有在数据表中呈现。

我在 Snack 上创建了以下代码：https://snack.expo.dev/@everestster/datatable-component

import React, {useEffect} from 'react';
import type {Node} from 'react';
import {View, ScrollView, Text, StyleSheet, Dimensions} 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 => {

    console.log(props.items);
    if (props.items.length === 0) {
      return;
    }
    return (
      <PaperDataTable.Header>
        {Object.keys(props.items[0]).forEach(function (key) {
          if (key !== 'Id') {
            <PaperDataTable.Title style={[styles.allCell]}>
              {key}
            </PaperDataTable.Title>;
          }
        })}
      </PaperDataTable.Header>
    );
  };

  const BodySection = (): Node => {
    return (
      <PaperDataTable.Row>
        {Object.keys(props.items[0]).forEach(function (key) {
          if (key !== 'Id') {
            <PaperDataTable.Cell style={[styles.allCell]}>
              {key}
            </PaperDataTable.Cell>;
          }
        })}
      </PaperDataTable.Row>
    );
  };

  return (
    <ScrollView style={styles.tableHolder}>
      <ScrollView horizontal={true}>
        <View style={{alignItems: 'center'}}>
          <PaperDataTable style={styles.table}>
            <HeaderSection />
            <BodySection />
            {/*<PaperDataTable.Header>
              <PaperDataTable.Title>Name</PaperDataTable.Title>
              <PaperDataTable.Title>Email</PaperDataTable.Title>              
            </PaperDataTable.Header>

            <PaperDataTable.Row>
              <PaperDataTable.Cell>John</PaperDataTable.Cell>
              <PaperDataTable.Cell>john@gmail.com</PaperDataTable.Cell>
            </PaperDataTable.Row>

            <PaperDataTable.Row>
              <PaperDataTable.Cell>Harry</PaperDataTable.Cell>
              <PaperDataTable.Cell>harr@gmail.com</PaperDataTable.Cell>              
            </PaperDataTable.Row>

            <PaperDataTable.Row>
              <PaperDataTable.Cell>Jessica</PaperDataTable.Cell>
              <PaperDataTable.Cell>jessica@gmail.com</PaperDataTable.Cell>              
            </PaperDataTable.Row>*/}
            <PaperDataTable.Pagination
              page={page}
              numberOfPages={1}
              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};

任何帮助将不胜感激。

Answer 1

问题出在你的结构上。您当前的 BodySection 没有返回 react-native-paper 想要的正确结构。我重写了 BodySection 函数。这是点心：https://snack.expo.dev/@truetiem/datatable-component

  const BodySection = (): Node => {
    return props.items.map(function (item) {
      return (
        <PaperDataTable.Row>
          {Object.keys(item).map((key) => key === 'Id' ? null : (
            <PaperDataTable.Cell>
              {item[key]}
            </PaperDataTable.Cell>
          ))}
        </PaperDataTable.Row>
      );
    });
  };

将片段移动到组件后，React Native Datatable 不显示

React Native Datatable doesn't show after moving the fragment into Component

react-native

react-native-paper

react-native-component