arrays - 无法从数组中获取数据到 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”)
你能帮我解决我哪里出错了吗?提前致谢。
解决方案
推荐阅读
- python - 无法登录用户在 Django 中使用 selenium 进行测试?
- java - 为什么从组件调用它们时我的服务没有写入数据库?
- c# - 如何在 aws 中查询实例的元数据并提供 json 格式的输出
- java - 在我的 portlet 中添加 postgres jdbc 后,我的 portlet 没有启动
- r - 将时间序列数据分成半小时的块
- python - 在 Salesforce 中选择动态输入框 - Selenium/Python
- oracle - 无法在 Toad 中删除数据库
- c# - 如何从 Castle.Core 而不是 Moq 引用 Castle.DynamicProxy.IProxyTargetAccessor?
- excel - Debug.Print 上的无效过程调用或参数
- jquery - jQuery - 在函数内部使用 .each()