我正在尝试从JSON API中获取所有出勤属性的数据。这是我的代码和JSON API。如果有更简单的方法，请告诉我，因为我是React-native的新手。
{
"message": "30 day data",
"data": [
{
"id": 3,
"addEmployee": {
"firstName": "manisha"
},
"attendances": [
{
"id": 3,
"checkIn": "2020-02-26T09:18:42.000Z",
"checkOut": "2020-02-26T09:18:54.000Z",
"totalHours": "0:0",
"date": "2020-02-26",
"status": "present",
"createdAt": "2020-02-26T09:18:42.000Z",
"updatedAt": "2020-02-26T09:18:54.000Z",
"userId": 3
},
{
"id": 4,
"checkIn": "2020-02-26T09:19:13.000Z",
"checkOut": "2020-02-26T09:20:03.000Z",
"totalHours": "0:0",
"date": "2020-02-26",
"status": "present",
"createdAt": "2020-02-26T09:19:13.000Z",
"updatedAt": "2020-02-26T09:20:03.000Z",
"userId": 3
},
{
"id": 7,
"checkIn": null,
"checkOut": null,
"totalHours": "0",
"date": "2020-03-04",
"status": "absent",
"createdAt": "2020-03-04T13:00:00.000Z",
"updatedAt": "2020-03-04T13:00:00.000Z",
"userId": 3
},
{
"id": 20,
"checkIn": null,
"checkOut": null,
"totalHours": "0",
"date": "2020-03-12",
"status": "absent",
"createdAt": "2020-03-12T13:00:00.000Z",
"updatedAt": "2020-03-12T13:00:00.000Z",
"userId": 3
},
{
"id": 35,
"checkIn": null,
"checkOut": null,
"totalHours": "0",
"date": "2020-03-13",
"status": "absent",
"createdAt": "2020-03-13T13:00:00.000Z",
"updatedAt": "2020-03-13T13:00:00.000Z",
"userId": 3
},
{
"id": 51,
"checkIn": null,
"checkOut": null,
"totalHours": "0",
"date": "2020-03-19",
"status": "absent",
"createdAt": "2020-03-19T13:00:00.000Z",
"updatedAt": "2020-03-19T13:00:00.000Z",
"userId": 3
},
{
"id": 74,
"checkIn": null,
"checkOut": null,
"totalHours": "0",
"date": "2020-03-20",
"status": "absent",
"createdAt": "2020-03-20T13:00:00.000Z",
"updatedAt": "2020-03-20T13:00:00.000Z",
"userId": 3
},
{
"id": 92,
"checkIn": null,
"checkOut": null,
"totalHours": "0",
"date": "2020-03-23",
"status": "absent",
"createdAt": "2020-03-23T13:00:00.000Z",
"updatedAt": "2020-03-23T13:00:00.000Z",
"userId": 3
}
]
}
],
"status": 1
}
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Image,
FlatList,
SafeAreaView,
ActivityIndicator,
} from 'react-native';
export default class Screen4 extends Component {
constructor() {
super()
this.state = {
dataSource: [] ,
isLoading: true
}
}
renderItem = ({ item }) => {
return (
<View>
<View style={{height:50,flexDirection:'row',alignItems:'center',}}>
<Text style={{ fontSize: 15, flex:0.20, }} >
{item.attendances.id}</Text>
<Text style={{ fontSize: 15, flex:0.20, }} >
{item.attendances.checkIn}</Text>
<Text style={{ fontSize: 15, flex:0.20, }} >
{item.attendances.checkOut}</Text>
<Text style={{ fontSize: 15, flex:0.20, }} >
{item.attendances.totalHours}</Text>
<Text style={{ fontSize: 15, flex:0.25, }} >
{item.attendances.date}</Text>
</View>
</View>
)
}
renderSeperator = () => {
return (
<View style={{ height: 1, width: '100%', backgroundColor: '#0A5252' }}>
</View>
)
}
componentDidMount() {
const url = 'http://104.197.28.169:3000/monthlyAdminData'
fetch(url)
.then(response => response.json())
.then((responseJson) => {
this.setState({
dataSource: responseJson.data ,
isLoading: false
})
})
.catch(error => console.log(error))
}
render() {
{
return (
this.state.isLoading
?
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color="#330066" />
</View>
:
<View style={styles.container}>
<SafeAreaView>
<View style={styles.firstV}>
<View style={styles.TextV}>
<Text style={{ fontSize: 15,marginTop: 15, flex:0.20 }}> ID</Text>
<Text style={{ fontSize: 15, marginTop: 15, flex:0.20 }}>Check-In</Text>
<Text style={{ fontSize: 15, marginTop: 15, flex:0.22 }}>Check-Out</Text>
<Text style={{ fontSize: 15, marginTop: 15,flex:0.20 }}> Total hr</Text>
<Text style={{ fontSize: 15, marginTop: 15, flex:0.20 }}> date</Text>
</View>
</View>
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={this.renderSeperator}
/>
</SafeAreaView>
</View>
);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
firstV: {
height: 50,
backgroundColor: '#E5E7E9',
},
TextV: {
flexDirection: 'row',flex:1
},
DetailView: {
flexDirection: 'row',
height: 53,
borderBottomWidth: 1,
borderBottomColor: 'black'
},
});
[1]: https://i.stack.imgur.com/tl2r4.png
答案 0 :(得分：0)
问题是您有一个对象数组，这些对象本身包含数组。因此，这取决于您想要的输出是什么。
"html.validate.scripts": false,
是一个数组，因此使用attendances毫无意义。它必须是attendances.id
我不知道此数据结构是否是故意的。如果是（即，您想渲染嵌套数组），则您的attendances[index].id函数需要包含另一个具有自己的renderItem函数的FlatList，其中renderAttendancesItem是attendancesDataSource （在您的第一个item.attendances中）。
在嵌套的renderItem的{{1}}中，您可以引用FlatList，renderItem等，等等。
（或者，您可以将收到的JSON解析为单个数组，而仅使用一个FlatList来呈现项目）
希望如此！