Блог

Я создал плоский список, в котором, если пользователь нажимает кнопку «Купить», он должен измениться, но он меняется для каждого элемента. Это должно изменить только тот элемент, который пользователь покупает. Может кто-нибудь сказать мне, что не так в моем коде, ниже приведен мой код

Плоский список

  <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 amp;amp; 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,
  };
};
  

и это мое действие для reducer

Может кто-нибудь, пожалуйста, скажите мне, что с этим не так?

Попробуйте добавить count к вашему item и в ваш редуктор положить

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