Обновление состояния одного элемента (остальные значения по умолчанию для констант)

Question

Я пытаюсь сделать карточки кликабельными и расширяемыми, но при обновлении состояния это происходит во всех карточках. Я просто хочу изменить состояние только одной карты (той, на которой произошло событие, в данном случае событие щелчка). Тем не менее, состояние обновляется для всех остальных карт. В настоящее время это работает для одного элемента, но оно также должно работать и для других.

export default class TransactionCards extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        isHidden: true
    };
}

toggleHidden() {
    this.setState({
        isHidden: !this.state.isHidden
    });
}
renderCards() {
    return this.props.data.map((card, index) => (
        <View key={card.id}>
            <View style={styles.dateContainer}>
                <Text style={styles.dateText}>{card.time}</Text>
            </View>
            <Card>
                <TouchableWithoutFeedback onPress={this.toggleHidden.bind(this)}>
                    <View>
                        <View>
                            <View style={styles.transactionContainer}>
                                <Image
                                    style={styles.countryImage}
                                    source={require("../../assets/images/us-country-icon.png")}
                                />
                                <Text style={styles.transactionTitle}>{card.title}</Text>
                                <Text style={styles.transactionAmount}>{card.cost}</Text>

                                <Icon
                                    name={card.transactionType == "debit" ? "log-out" : "log-in"}
                                    type="feather"
                                    color={card.transactionType == "debit" ? "red" : "green"}
                                    size={18}
                                    iconStyle={styles.transactionIcon}
                                />
                            </View>
                            <View>
                                <Text style={styles.transactionBankDetails}>{card.bankDetails}</Text>
                            </View>
                        </View>
                        {/* Setting visiblity condition */}
                        {!this.state.isHidden && (
                            <View>
                                <Divider style={styles.CardItemDivider} />
                                <View display="flex" flexDirection="row" justifyContent="space-between">
                                    <View>
                                        <Text style={styles.transactionBankDetails}>
                                            {card.transactionCategory}
                                        </Text>
                                        <Text style={styles.transactionBankDetails}>{card.accountName}</Text>
                                    </View>
                                    <View>
                                        <Icon name="bell" type="feather" iconStyle={styles.transactionIcon} />
                                    </View>
                                </View>
                            </View>
                        )}
                    </View>
                </TouchableWithoutFeedback>
            </Card>
        </View>
    ));
}

render() {
    return <ScrollView showsVerticalScrollIndicator={false}>{this.renderCards()}</ScrollView>;
}

}

Answer 1

1. Создайте новый компонент для карты и передайте необходимые параметры
2. Выполните функцию toggleHidden внутри компонента Карты

, тогда внутри файла он должен выглядеть следующим образом

   <Card {SetYourPassedParams} />
   ......

Answer 2

У вас есть два элемента, связанные с одним и тем же значением состояния в одном и том же состоянии.Если вы хотите отделить поведение, вы также должны отделить значения.