如何在React Native中比较两个数组？

本文介绍了如何在React Native中比较两个数组？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我正在创建一个React Native应用并将联系人详细信息加载到我的应用中。现在，我想在联系人前面显示一个邀请按钮。我的联系方式以数组形式显示。我还有其他一些联系方式的数组。我想比较这两个数组，只想显示邀请按钮而不是第二个数组。我该怎么做？I'm creating a react native app and load contact details into my app. Now I wanted to display an Invite button in front of the contact. My contact details in an array. I have another array with some contact details. I wanted to compare those two arrays and wanted to display the invite button only in contact that not in the second array. How can I do this? 此是我尝试过的 import React, { Component } from 'react';import { StyleSheet, Text, View, TouchableOpacity, Image, Alert, ScrollView, FlatList,} from 'react-native';import {CheckBox} from 'react-native-elements';export default class Test extends Component { constructor(props) { super(props); this.state = { calls: [ {"fullname": "Mark Doe", "phoneNumber":"0112234567", image:"https://bootdey.com/img/Content/avatar/avatar7.png"}, {"fullname": "Clark Man", "phoneNumber":"0723434567", image:"https://bootdey.com/img/Content/avatar/avatar6.png"}, {"fullname": "Jaden Boor", "phoneNumber":"0778902356", image:"https://bootdey.com/img/Content/avatar/avatar5.png"}, {"fullname": "Srick Tree", "phoneNumber":"0980234589", image:"https://bootdey.com/img/Content/avatar/avatar4.png"}, {"fullname": "John Doe", "phoneNumber":"0112255644", image:"https://bootdey.com/img/Content/avatar/avatar3.png"}, {"fullname": "Mark Doe", "phoneNumber":"0723567890", image:"https://bootdey.com/img/Content/avatar/avatar2.png"}, {"fullname": "John Doe", "phoneNumber":"0778904321", image:"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"fullname": "Mark Doe", "phoneNumber":"0785674334", image:"https://bootdey.com/img/Content/avatar/avatar4.png"}, {"fullname": "Jaden Boor", "phoneNumber":"0713456980", image:"https://bootdey.com/img/Content/avatar/avatar7.png"}, {"fullname": "Mark Doe", "phoneNumber":"0112357654", image:"https://bootdey.com/img/Content/avatar/avatar1.png"}, ], Othercalls: [ {"fullname": "Mark Doe", "phoneNumber":"0112234567"}, {"fullname": "Clark Man", "phoneNumber":"0723434567"}, {"fullname": "Jaden Boor", "phoneNumber":"0778902356"}, {"fullname": "Srick Tree", "phoneNumber":"0980234589"}, {"fullname": "John Doe", "phoneNumber":"0112255644"}, ] }; } renderItem = ({item}) => { return ( <TouchableOpacity> <View style={styles.row}> <Image source={{ uri: item.image }} style={styles.pic} /> <View> <View style={styles.nameContainer}> <Text style={styles.txtContactList}>{item.fullname}</Text> <Text style={styles.txtPhoneNumber}>{item.phoneNumber}</Text> </View> </View> <TouchableOpacity style={[styles.inviteContainer, styles.loginButton]}> <Text style={styles.inviteText}>Invite</Text> </TouchableOpacity> </View> </TouchableOpacity> ); } render() { return( <View style={{ flex: 1 }} > <Text style={{ fontSize: 26, color: '#0080ff', textAlign: 'center', marginBottom: 30, marginTop: 10, }}> Show Invite Button </Text> <FlatList extraData={this.state} data={this.state.calls} keyExtractor = {(item) => { return item.id; }} renderItem={this.renderItem}/> </View> ); }}const styles = StyleSheet.create({ row: { flexDirection: 'row', alignItems: 'center', borderColor: '#dcdcdc', backgroundColor: '#fff', borderBottomWidth: 1, padding: 10, justifyContent: 'space-between', }, pic: { borderRadius: 25, width: 50, height: 50, }, nameContainer: { flexDirection: 'column', justifyContent: 'space-between', width: 200, }, nameTxt: { marginLeft: 15, fontWeight: '600', color: '#222', fontSize: 15, }, txtContactList: { fontSize: 18, color: 'black', marginTop: 5, marginLeft: 15, }, txtPhoneNumber: { fontSize: 15, color: 'black', marginTop: 5, marginLeft: 15, }, inviteContainer: { width: 80, height:35, alignItems: 'center', justifyContent: 'center', marginTop: 10, backgroundColor: 'transparent', }, loginButton: { backgroundColor: '#0080ff', shadowColor: '#808080', shadowOffset: { width: 0, height: 9, }, shadowOpacity: 0.5, shadowRadius: 12.35, elevation: 19, }, inviteText: { color: 'white', fontSize: 18, },}); 我需要比较数组 Calls和 Othercalls，并想在前面显示邀请按钮I need to compare arrays "Calls" and "Othercalls" and wanted to display invite button in front of the contact those are not in "Othercalls" array.推荐答案 let tempList = this.state.Othercalls.map(item => item.phoneNumber);let result = this.state.calls.filter(item => (tempList.includes(item.phoneNumber))) 这篇关于如何在React Native中比较两个数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！