React Native，列表中所有項目的按鈕更改

Question

我創建了一個平面列表，如果用戶點擊購買按鈕，它應該會改變，但每個項目都會改變。 它應該只改變用戶購買的那個項目。 有人可以告訴我我的代碼有什么問題，下面是我的代碼

平面列表

 <FlatList
              data={this.props.items}
              key={(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);
                        }}
                      >
                        Buy Once
                      </Text>
                    </View>
                  )}
                </CardBuyItem>
              )}
            />
const mapStateToProps = (state) => {
  return {
    items: state.clothes.jeans,
    button: state.clothes.showButton,
    added: state.clothes.addedItems,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    addToCart: (id) => dispatch(addToCart(id)),
    addQuantity: (id) => dispatch(addQuantity(id)),
    subtractQuantity: (id) => dispatch(subtractQuantity(id)),
    showCart: () => dispatch(showCart()),
    showButton: (id) => dispatch(showButton(id)),
  };
};

這是我的平面列表，其中按鈕應該針對該特定項目更改

減速器

 if (action.type === SHOW_BUTTON) {
    let addedItem = state.jeans.find((item) => item.id === action.id);
    return {
      ...state,
      addedItem: addedItem,
      showButton: action.showButton,
    };
}

const initialstate = {  showButton: false}

那是我的減速機

行動

export const showButton = (id) => {
  return {
    type: SHOW_BUTTON,
    showButton: true,
    id,
  };
};

這就是我對減速機的操作

有人可以告訴我它有什么問題嗎？

Answer 1

嘗試將count添加到您的item並在您的減速器中放置

 item.forEach(cp => {
      if (cp.id === action.id) {
        cp.count += 1;
      }
    });