從陣列問題拼接 - 聯繫人未定義

Question

我是新的反應原生和我奮鬥共享狀態的想法 - 我開始創建一個聯繫人應用程序與2個組件 - ContactList（類組件），ContactDetail（功能零件）。

一切都進行得很順利，直到我想從孩子（功能）父（類）分享一些東西 - 相反作品

我想不過來拼接從陣列中的聯繫人，在經過接觸時「ContactDetail」上的函數「RemoveContact」我在console.log中變得未定義。

這不會崩潰我的應用程序和拼接工程，但它會拼接從數組的末尾，而不是我想要的對象的具體索引。

你能指導我做什麼我做錯了嗎？

這裏是我ContactDetail類成分

import React, { Component } from 'react'; 
import { ScrollView, View } from 'react-native'; 
import ContactDetail from './ContactDetail.js'; 
import { Header, Item, Input, Container, Button, Icon, Text } from 'native-base'; 

const contacts = [ 
    { firstname: 'a', lastname: 'b', dogname: 'c', image: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', id: 1 }, 
    { firstname: 'd', lastname: 'e', dogname: 'f', image: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', id: 2 }, 
    { firstname: 'g', lastname: 'h', dogname: 'j', image: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', id: 3 }, 
    { firstname: 'k', lastname: 'l', dogname: 'm', image: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', id: 4 }, 
    { firstname: 'n', lastname: 'o', dogname: 'p', image: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', id: 5 } 

]; 
export default class ContactList extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     inputValue: '', 
     contactsNew: [], 
     }; 
} 


render() { 
const inputValueLet = this.state.inputValue.trim().toLowerCase(); 
const removeContact = ({ contact }) => { 
    let index = this.state.contactsNew.indexOf(contact); 
    console.log(contact); 
    let nextContacts = this.state.contactsNew; 
    nextContacts.splice(index, 1); 
    this.setState({ 
     contactsNew: nextContacts, 
    }); 
}; 

if (contacts.length > 0) { 
this.state.contactsNew.filter(contact => contact.dogname.toLowerCase().match(inputValueLet)); 

const dataRow = this.state.contactsNew.map((contact, index) => (
<ContactDetail key={contact.firstname} contact={contact} removeContact={removeContact} /> 
     )); 
    return (
     <View> 

      <Header searchBar rounded style={{ marginBottom: 10 }} > 
      <Item> 
       <Icon name="ios-search" /> 
       <Input 
       placeholder="find friends" 
       value={this.state.inputValue} 
       onChangeText={inputValue => this.setState({ inputValue })} 
       /> 
       <Icon name="ios-people" /> 
      </Item> 
      <Button transparent> 
       <Text>find friends</Text> 
      </Button> 
      </Header> 

      <ScrollView style={{ height: 400 }} > 
      {dataRow} 
      </ScrollView> 
     </View> 
    ); 
    } 
} 

的第二個部件 - ContactDetail - 功能組件

import React from 'react'; 
import { View, Image, ListView, TouchableOpacity } from 'react-native'; 
import { Card, ListItem, Divider } from 'react-native-elements'; 
import { Button, Icon, Title, Text, Item, Input, Right, SwipeRow } from 'native-base'; 


const ContactDetail = ({ contact, removeContact }) => { 

    const { firstname, 
      dogname, 
      image } = contact; 
    return (
     <Card style={{ marginTop: 3, marginBottom: 15 }} > 
       <View style={styles.headerContentStyle}> 
       <SwipeRow 
      leftOpenValue={55} 
      rightOpenValue={-55} 
      left={ 
       <Button primary onPress={() => { removeContact(contact); }}> 
       <Icon active name="person" /> 
       </Button> 
      } 
      body={ 
      <TouchableOpacity> 
       <View style={styles.viewContainer}> 

        <Image 
         style={styles.thumbnailStyle} 
         source={{ uri: image }} 
        /> 

       <Text style={{ textAlign: 'right' }} >{dogname}</Text> 

       </View> 
       </TouchableOpacity> 
      } 
      right={ 
       <Button danger onPress={() => {}}> 
       <Icon active name="trash" /> 
       </Button> 
      } 
       /> 
       <Divider style={{ backgroundColor: 'blue', borderBottomWidth: 0, marginTop: 3 }} /> 
       </View> 

     </Card> 
    ); 
}; 

export default ContactDetail; 

Answer 1

你有一個語法錯誤，我相信。你正在發送一個對象，然後嘗試解構它，而不是直接使用它。

這

const removeContact = ({ contact }) => { ... } 

應該是這個

const removeContact = (contact) => { ... } 

或本

onPress={() => { removeContact(contact); }} 

應該是這個

onPress={() => { removeContact({contact}); }}