javascript - React Native,无法使用 react -redux 在购物车中添加商品
问题描述
我使用 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)),
};
};
下面是我的购物车屏幕代码,当用户单击时应添加项目
购物车.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,
};
};
下面是我的代码缩减器和操作
减速器.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;
}
}
动作.js
import { ADD_TO_CART } from "./ClothesActionType";
export const addToCart = (id) => {
return {
type: ADD_TO_CART,
id,
};
};
我试图找出问题所在,但找不到任何错误。有人可以帮我解决这个问题吗?
解决方案
你正在改变状态,这里有一些关于如何不这样做的信息。
我认为你的减速器应该是这样的:
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;
}
}
推荐阅读
- reactjs - 谁能给我解决以下错误的方法?我正在尝试使用 Jest 运行测试以做出反应,但导入时出现错误
- firebase - 如何使用 Firebase 组合两个颤振项目?
- websphere - IBM Liberty 19.0.0.11 返回 CWWKO0801E:无法初始化 SSL 连接
- excel - 在单击右键菜单中的选择数据并选择另一个系列之前,不会显示图表系列名称
- javascript - window.opener = null 在浏览器移动端(例如:谷歌浏览器应用程序)
- android - 是否可以将应用程序调试签名包发送到 AWS Device Farm,以便他们使用它而不是他们自己的包来重新签名应用程序?
- c# - JWT 总是在 .net core api 上返回未经授权的 401
- c++ - Qt c++ 不会为所有对象调用 move_slot。为什么?
- node.js - 为什么 NPM 会安装一个空的“etc”文件夹和多个命令文件?
- c# - 如何使用按键事件打开 datetimepicker 日历?