React Native，无法使用 react -redux 在购物车中添加商品

Question

我使用 react native 和 redux 创建了一个购物车屏幕和商品列表，但是当我点击购买商品时，它没有添加到购物车中，也没有显示任何错误

下面是我存储项目列表的代码

牛仔裤.js

class Jeans extends Component {
  render() {
    return (
      <View style={styles.container}>
        <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>
              <TouchableHighlight onPress={() => this.props.addToCart(item.id)}>
                <View style={styles.buy}>
                  <Text>Buy Once</Text>
                </View>
              </TouchableHighlight>
            </CardBuyItem>
          )}
        />
      </View>
    );
  }
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    addToCart: (id) => dispatch(addToCart(id)),
  };
};

下面是我的购物车屏幕代码，当用户点击时应该添加项目

cart.js

class Cart extends Component {
  render() {
    let addedItems =
      this.props.items && this.props.items.length ? (
        <FlatList
          data={this.props.items}
          key={(items) => items.id.toString()}
          numColumns={2}
          renderItem={({ item }) => (
            <View>
              <Image style={styles.image} source={item.image} />
              <View style={styles.detailContainer}>
                <Text style={styles.title}>{item.title}</Text>
                <Text style={styles.subTitle} numberOfLines={1}>
                  Quantity: {item.quantity}
                </Text>
                <Text style={styles.price}>Rs {item.price}</Text>
              </View>
              <TouchableOpacity>
                <View style={styles.buy}>
                  <Text>Remove</Text>
                </View>
              </TouchableOpacity>
            </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 Order:</Text>
        </View>
        <View>{addedItems}</View>
      </View>
    );
  }
}

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

下面是我的代码缩减器和操作

reducer.js

export default function ClothesReducer(state = initialstate, action) {
  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,
        total: state.total + addedItem.price,
      };
    } else {
      addedItem.quantity = 1;
      let newTotal = state.total + addedItem.price;

      return {
        ...state,
        addedItems: [...state.addedItems, addedItem],
        total: newTotal,
      };
    }
  } else {
    return state;
  }
}

action.js

import { ADD_TO_CART } from "./ClothesActionType";

export const addToCart = (id) => {
  return {
    type: ADD_TO_CART,
    id,
  };
};

我试图找出问题所在，但找不到任何错误。有人可以帮我解决这个问题吗？

Answer 1

在 cart.js 中你应该替换它

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

有

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

Answer 2

你正在改变状态，here 是一些关于如何不这样做的信息。

我认为你的减速器应该是这样的：

export default function ClothesReducer(
  state = initialstate,
  action
) {
  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
    );
    const addedItems = existed_item
      ? state.addedItems.map((item) =>
          item === existed_item
            ? { ...item, quantity: item.quantity + 1 }
            : item
        )
      : [
          ...state.addedItems,
          { ...addedItem, quantity: 1 },
        ];
    return {
      ...state,
      addedItems,
      total: state.total + addedItem.price,
    };
  } else {
    return state;
  }
}