【发布时间】:2020-10-16 09:24:33
【问题描述】:
我为我的购物应用创建了一个布尔状态,当用户单击购买按钮时,它应该将该状态设置为 true 并在容器中显示购物车总数,但它不起作用。
下面是我的代码:
减速器:
if (action.type === SHOW_CART) {
return {
...state,
show: action.showCart,
};
const initialstate = {
show: false,
}
这是我的初始状态的减速器:
export const showCart = () => {
return {
type: SHOW_CART,
showCart: true,
};
};
这是我的行动:
<View style={styles.buy}>
<Text
onPress={() => {
this.props.addToCart(item.id);
this.props.showCart();
}}
>
Buy Once
</Text>
</View>
const mapStateToProps = (state) => {
return {
items: state.clothes.jeans,
};
};
const mapDispatchToProps = (dispatch) => {
return {
addToCart: (id) => dispatch(addToCart(id)),
showCart: () => dispatch(showCart()),
};
};
在这段代码中我使用了一个平面列表,在平面列表中我使用了onPress 来显示购物车容器并调度我的操作
应用程序
export default function App() {
return (
<>
<Provider store={Store}>
<NavigationContainer>
<AppNavigation />
</NavigationContainer>
<ViewChart />
</Provider>
</>
);
}
ViewCart.js
<View>
{this.props.show ? (
<View style={styles.total}>
<Text style={styles.totaltext}>Total:</Text>
<Text style={styles.priceTotal}>{this.props.total}</Text>
<View style={styles.onPress}>
<Text
style={styles.pressText}
onPress={() => this.props.navigation.navigate("Cart")}
>
View Cart
</Text>
</View>
</View>
) : null}
</View>
const mapStateToProps = (state) => {
return {
total: state.clothes.total,
show: state.clothes.show,
};
};
export default connect(mapStateToProps)(ViewChart);
在 App.js 中我添加了视图购物车的容器,当用户点击购买时应该显示
在视图购物车中我收到错误undefined is not an object (evaluating '_this.props.navigation.navigate')
【问题讨论】:
-
this.props.showCart;应该是 this.props.showCart();
-
没有工作会引发错误
_this.props.showCart is not a function. -
addToCart 有效吗?
-
是的,它正在工作
-
showChar 应该是 showCart
标签: javascript reactjs react-native redux