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}); }}

从数组问题拼接 - 联系是未定义的

1 个答案: