首页 > 解决方案 > 无法从数组中获取数据到 react-native-table-component 表中

问题描述

我正在开发 React Native 应用程序。我的要求是以表格格式显示来自 API 的数据。我正在使用 react-native-table-component。我无法遍历数组以在表格中显示数据。下面是我的代码:

StudentFeeTable.js:

import React, { useState,useEffect } from "react";
import { StyleSheet, View ,FlatList,Text,ScrollView} from "react-native";
import { useSelector,useDispatch} from 'react-redux';
import * as feeActions from '../../store/actions/fee';
import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component';

const StudentFeeTable =  props  => {
const tableHead = ['Sl No.','Fee Name','Due Date','Fee To Be Paid','Due Amount']
const tableData = props.data;
console.log(props.data);
return (
<ScrollView horizontal={true}>
<View style={styles.container}>
  <Text>FEE PAID DETAILS</Text>
     <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
      <Row data={tableHead} style={styles.head} textStyle={styles.text}/>
      {
        
            tableData.map((Fee_Id, i) => (
              <Row key={i} data={Fee_Id} style={styles.text}/>
            ))
          } />
    </Table> 
    </View>
    </ScrollView>
 );
 };
 const styles = StyleSheet.create({
 container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
 head: { height: 40, backgroundColor: '#f1f8ff',width:550},
 text: { margin: 6 }
 });
 export default StudentFeeTable;

在控制台中,我得到以下 JSON 数据:

Fee_Id {
"DueAmt": 0,
"Duedate": "10 Jan 2020",
"FeeName": "Tuition Fee Inst.No - 2",
"TobePaidAmt": 360,
},
Fee_Id {
"DueAmt": 0,
"Duedate": "10 Jun 2020",
"FeeName": "Examination Fee Inst.No - 3",
"TobePaidAmt": 15,
},

运行代码后,我收到如下错误:

undefined 不是对象(评估“tableData.map”)

你能帮我解决我哪里出错了吗?提前致谢。

标签: arraysreactjsreact-native

解决方案


推荐阅读