javascript - 更新单个元素的状态(其余默认为常量)

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. 在 Card 组件内执行 toggleHidden 函数

然后在文件中它应该看起来像

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