React native 如何在React Native中访问屏幕上的嵌套数组数据

我有一个包含另一个考勤数组的数据对象数组，我想访问“所有考勤”属性。我需要能够将数据插入到属于名为Attention的嵌套数组的签入、签出和总小时数中。我无法从HTTP请求中获取这些类型的数据，请建议并检查我的代码。我也想知道这一点 如何从JSON API获取多个数组数据

"data": [
    {
        "id": 40,
        "addEmployee": {
            "firstName": "Divyanshu"
        },
        "attendances": [
            {
                "id": 615,
                "checkIn": null,
                "checkOut": "2020-04-17T04:54:15.000Z",
                "totalHours": "NaN:NaN",
                "date": "2020-04-17",
                "status": "present",
                "createdAt": "2020-04-16T13:57:30.000Z",
                "updatedAt": "2020-04-17T04:54:15.000Z",
                "userId": 40
            }
        ]
    },
    {
        "id": 21,
        "addEmployee": {
            "firstName": "Narayan"
        },
        "attendances": [
            {
                "id": 617,
                "checkIn": "2020-04-17T05:20:45.000Z",
                "checkOut": "2020-04-17T05:21:22.000Z",
                "totalHours": "0:0",
                "date": "2020-04-17",
                "status": "present",
                "createdAt": "2020-04-17T05:20:45.000Z",
                "updatedAt": "2020-04-17T05:21:22.000Z",
                "userId": 21
            },
        ]
    },
    {
        "id": 20,
        "addEmployee": {
            "firstName": "Himanshu"
        },
        "attendances": []
    },
    0'.v\zcfipzgzy
],
    "status": 1
 }

我能够将数据插入普通数组。但我不知道如何插入嵌套数组，无法从上面的嵌套数组数据访问考勤数据

componentDidMount（）{
常量url=http://104.197.28.169:3000/todayAttendanceList'
获取（url）
.then（response=>response.json（））
.然后（（responseJson）=>{
console.log（“aagiyo”，responseJson）
这是我的国家({
数据来源：responseJson，
孤岛加载：false
})
})
.catch（错误=>console.log（错误））
}
{项目.出席.签到}
{项目.出席.结帐}
{项目.出席人数.总小时数}
}
ItemSeparatorComponent={this.renderoperator}
/>

使用带有扩展语法的

映射

函数将数据插入签入、签出和总小时值：

responseJson.map(item => ({...item, attendances: item.attendances.map(attendance => 
({...attendance, checkIn: 'your checkIn value', checkOut: 'your checkOut value', 
totalHours: 'totalHours value'}))}))

---

您可以通过使用API执行以下操作来显示出席人数：

import React from 'react';
import {View, FlatList, Text} from 'react-native'; 

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data:[
                {
                    "id": 40,
                    "addEmployee": {
                        "firstName": "Divyanshu"
                    },
                    "attendances": [
                        {
                            "id": 615,
                            "checkIn": null,
                            "checkOut": "2020-04-17T04:54:15.000Z",
                            "totalHours": "NaN:NaN",
                            "date": "2020-04-17",
                            "status": "present",
                            "createdAt": "2020-04-16T13:57:30.000Z",
                            "updatedAt": "2020-04-17T04:54:15.000Z",
                            "userId": 40
                        }
                    ]
                },
                {
                    "id": 21,
                    "addEmployee": {
                        "firstName": "Narayan"
                    },
                    "attendances": [
                        {
                            "id": 617,
                            "checkIn": "2020-04-17T05:20:45.000Z",
                            "checkOut": "2020-04-17T05:21:22.000Z",
                            "totalHours": "0:0",
                            "date": "2020-04-17",
                            "status": "present",
                            "createdAt": "2020-04-17T05:20:45.000Z",
                            "updatedAt": "2020-04-17T05:21:22.000Z",
                            "userId": 21
                        },
                    ]
                },
                {
                    "id": 20,
                    "addEmployee": {
                        "firstName": "Himanshu"
                    },
                    "attendances": []
                },
            ],
         };
        }

    render() {
        return (
            <FlatList
            data={this.state.data}
            renderItem={({ item }) =>
            { 

                return(
                    <View style={{alignItems:"center",justifyContent:"center",marginTop:50}}>
            <Text style={{fontWeight:"bold",fontSize:18}}>Attendance of {item.addEmployee.firstName}</Text>
                    <View>
                        <Text style={{ fontSize: 15 }}><Text style={{fontWeight:"bold"}}>Check In:</Text>  {item.attendances.length >0 ? item.attendances[0].checkIn : null}</Text>
                    </View>
                    <View>
                        <Text style={{ fontSize: 15, }}><Text style={{fontWeight:"bold"}}>Check Out:</Text>{item.attendances.length >0 ? item.attendances[0].checkOut : null}</Text>
                    </View>
                    <View>
                        <Text style={{ fontSize: 15 }}><Text style={{fontWeight:"bold"}}>Total hours:</Text>{item.attendances.length >0 ? item.attendances[0].totalHours : null}</Text>
                    </View>
                    </View>
                )
            }
                }
               />
        );
      }
  }

从“React”导入React；
从“react native”导入{View，FlatList，Text}；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{
“id”：40，
“增聘员工”：{
“名字”：“Divyanshu”
},
“出席人数”：[
{
“id”：615，
“签入”：空，
“结帐”：“2020-04-17T04:54:15.000Z”，
“总小时数”：“南：南”，
“日期”：“2020-04-17”，
“状态”：“当前”，
“createdAt”：“2020-04-16T13:57:30.000Z”，
“更新日期”：“2020-04-17T04:54:15.000Z”，
“用户ID”：40
}
]
},
{
“id”：21，
“增聘员工”：{
“名字”：“纳拉扬”
},
“出席人数”：[
{
“id”：617，
“签入”：“2020-04-17T05:20:45.000Z”，
“签出”：“2020-04-17T05:21:22.000Z”，
“总小时数”：“0:0”，
“日期”：“2020-04-17”，
“状态”：“当前”，
“createdAt”：“2020-04-17T05:20:45.000Z”，
“更新日期”：“2020-04-17T05:21:22.000Z”，
“用户ID”：21
},
]
},
{
“id”：20，
“增聘员工”：{
“名字”：“希曼殊”
},
“出席人数”：[]
},
],
};
}
render（）{
返回(
{ 
返回(
{item.addEmployee.firstName}的出席情况
签入：{item.attentations.length>0？item.attentations[0]。签入：null}
签出：{item.attentations.length>0？item.attentations[0]。签出：null}
总小时数：{item.attentings.length>0？item.attentings[0]。总小时数：null}
)
}
}
/>
);
}
}

---

希望这有帮助

你想实现什么目标有点不清楚。如果要显示所有出席人数和相应员工的列表，请使用

您可以执行以下操作：

<SectionList
      sections={this.state.transformedDatasource}
      keyExtractor={(item, index) => item.id}
      renderItem={({ item }) =>
        <View style={styles.firstV1}>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15 }}>{item.checkIn}</Text>
            </View>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15, }}>{item.checkOut}</Text>
            </View>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15 }}>{item.totalHours}</Text>
            </View>
        }}
      renderSectionHeader={({ section: { title } }) => (
        <Text>{title}</Text>
      )}
    />

更改此声明：

this.setState({
                dataSource: responseJson,
                isLoading: false
            })

致：

并将您的平面列表代码替换为以下内容：

<SectionList
      sections={this.state.transformedDatasource}
      keyExtractor={(item, index) => item.id}
      renderItem={({ item }) =>
        <View style={styles.firstV1}>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15 }}>{item.checkIn}</Text>
            </View>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15, }}>{item.checkOut}</Text>
            </View>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15 }}>{item.totalHours}</Text>
            </View>
        }}
      renderSectionHeader={({ section: { title } }) => (
        <Text>{title}</Text>
      )}
    />

item.id}
renderItem={（{item}）=>
{item.checkIn}
{item.checkOut}
{item.totalHours}
}}
renderSectionHeader={（{section:{title}}}）=>(
{title}
)}
/>

我收到一条消息，“responseJson.map”在调试期间未定义。啊，您可以使用一些库，如

lodash

来帮助您。在终端中，执行

npm i lodash

。在文件顶部，从“lodash”添加

import uuu；

；在代码中，像这样使用它：`const transformedData=\.map（responseJson，elem=>（{key:elem.id，title:elem.addEmployee.firstName，data:elem.attentations}））`