React Native，購物車項目值未更新

Question

我為我的購物應用程序創建了一個購物車組件，但我面臨一個問題，當我更新產品數量時，它會更新總價而不是商品價格（最后是圖片），我的代碼如下

減速器.js

if (action.type === ADD_TO_CART) {
    let addedItem = state.jeans.find((item) => item.id === action.id);
    let existed_item = state.addedItems.find((item) => action.id === item.id);
    if (existed_item) {
      addedItem.quantity += 1;
      return {
        ...state.jeans,
        total: state.total + addedItem.price,
      };
    } else {
      addedItem.quantity = 1;
      let newTotal = state.total + addedItem.price;

      return {
        ...state,
        addedItems: [...state.addedItems, addedItem],
        total: newTotal,
      };
    }
  }
  //INSIDE CART COMPONENT
  if (action.type === ADD_QUANTITY) {
    let addedItem = state.jeans.find((item) => item.id === action.id);
    addedItem.quantity += 1;
    let newTotal = state.total + addedItem.price;
    return {
      ...state,
      total: newTotal,
    };
  }
  if (action.type === SUB_QUANTITY) {
    let addedItem = state.jeans.find((item) => item.id === action.id);
    //if the qt == 0 then it should be removed
    if (addedItem.quantity === 1) {
      let new_items = state.addedItems.filter((item) => item.id !== action.id);
      let newTotal = state.total - addedItem.price;
      return {
        ...state,
        addedItems: new_items,
        total: newTotal,
      };
    } else {
      addedItem.quantity -= 1;
      let newTotal = state.total - addedItem.price;
      return {
        ...state,
        total: newTotal,
      };
    }

那是我的減速器，我在其中添加了更新數量的功能，

購物車.js

Footer = () => {
    return (
      <View style={styles.totalContainer}>
        <Text style={styles.textTotal}>Total:</Text>
        <Text style={styles.total}>Rs {this.props.total}</Text>
      </View>
    );
  };

  render() {
    let addedItems =
      this.props.items && this.props.items.length ? (
        <FlatList
          data={this.props.items}
          key={(items) => items.id.toString()}
          numColumns={2}
          ListFooterComponent={this.Footer}
          renderItem={({ item }) => (
            <View style={styles.cartContainer}>
              <TouchableOpacity style={styles.button}>
                <MaterialCommunityIcons
                  name="delete-circle-outline"
                  size={28}
                  onPress={() => this.props.removeItem(item.id)}
                />
              </TouchableOpacity>
              <Image style={styles.image} source={item.image} />
              <View style={{ width: 150 }}>
                <Text style={styles.title}>{item.title}</Text>
                <Text style={styles.subTitle} numberOfLines={1}>
                  {item.subTitle}
                </Text>
              </View>
              <Text style={styles.quantity} numberOfLines={2}>
                {item.quantity}
              </Text>
              <Text style={styles.price}>Rs {item.price}</Text>
              <TouchableWithoutFeedback>
                <MaterialCommunityIcons
                  style={styles.iconUp}
                  size={20}
                  name="plus-circle-outline"
                  onPress={() => this.props.addQuantity(item.id)}
                />
              </TouchableWithoutFeedback>
              <MaterialCommunityIcons
                style={styles.iconDown}
                size={20}
                name="minus-circle-outline"
                onPress={() => this.props.subtractQuantity(item.id)}
              />
            </View>
          )}
        />
      ) : (
        <View style={styles.emptyContainer}>
          <Text style={styles.empty}>There is Nothing in your Cart</Text>
        </View>
      );

    return (
      <View style={styles.container}>
        <View style={styles.order}>
          <Text style={styles.orderText}>You Orders:</Text>
        </View>
        <View>{addedItems}</View>
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    items: state.clothes.addedItems,
    total: state.clothes.total,
  };
};

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

這是我的購物車代碼，這里我面臨另一個問題，如果我添加更多產品，我的頁腳功能正在顯示並且平面列表無法正常工作平面列表將僅顯示 3 個產品，我們將在它們上方添加其他產品。

有人請幫助我並告訴我發生了什么事嗎？

Answer 1

您沒有在任何地方更新價格

你可以像下面這樣

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

或者，如果您希望值處於 redux 狀態，請考慮更新 reducer 級別中的值。