React Native，所有项目的状态都在变化，而不是被点击的项目

Question

我在平面列表中创建了一个按钮，当用户单击一个特定项目时，它的按钮应该改变状态并且应该出现递增按钮，但是按钮会改变所有项目的状态。我也通过了 id 但它不起作用，有人可以帮助我......下面是我的代码

项目.js

<FlatList

              data={this.props.items}

              extraData={this.props}

              keyExtractor={(items) => items.id.toString()}

              numColumns={2}

              renderItem={({ item }) => (

                <CardBuyItem>

                  <Image style={styles.image} source={item.image} />

                  <View style={styles.detailContainer}>

                    <Text style={styles.title}>{item.title}</Text>

                    <Text style={styles.subTitle} numberOfLines={1}>

                      {item.subTitle}

                    </Text>

                    <Text style={styles.price}>Rs {item.price}</Text>

                  </View>

                  {this.props.button && this.props.added.length > 0 ? (

                    <View style={styles.add}>

                      <Text style={styles.quantity}>{item.quantity}</Text>

                      <MaterialCommunityIcons

                        style={styles.iconUp}

                        size={20}

                        name="plus-circle-outline"

                        onPress={() => this.props.addQuantity(item.id)}

                      />

                      <MaterialCommunityIcons

                        style={styles.iconDown}

                        size={20}

                        name="minus-circle-outline"

                        onPress={() => this.props.subtractQuantity(item.id)}

                      />

                    </View>

                  ) : (

                    <View style={styles.buy}>

                      <Text

                        style={styles.buyonce}

                        onPress={() => {

                          this.props.addToCart(item.id);

                          this.props.showCart();

                          this.props.showButton(item.id);

                        }}

Answer 1

您有一个通用的状态变量，这会导致它显示所有按钮。你可以像这样做一个简单的解决方案。在您的平面列表中，您可以有一个逻辑来显示按钮{this.props.added.find(x=>x.id==item.id)&nbsp;!=null&nbsp;?&nbsp;(或者，如果您必须使用 reducer，则必须在数组中拥有一个属性并更新它，这将是维护起来很复杂的。