如何解决如何在React on Checkbox更改中更新同级复选框?
我有以下React代码,根据购物车中放置的物品来更新购物车中的复选框:
import React,{ useState } from "react";
import { connect } from "react-redux";
import "./circlecheckbox.css";
import { Checkbox } from "aws-amplify-react";
import { addToCart,removeFromCart } from "actions";
import { ICartState } from "reducer/cartReducer";
interface IState {
cart: ICartState;
}
interface IProps {
removeFromCart: Function;
addToCart: Function;
id: number;
cart: any[];
}
const CircleCheckbox: React.FC<IProps> = ({
addToCart,removeFromCart,id,cart,}) => {
const [checked,setChecked] = useState(cart.some((prod) => prod.id === id));
return (
<Checkbox
onChange={(e: any) => {
setChecked(!checked);
if (e.target.checked === true) {
addToCart(id);
} else if (e.target.checked === false) {
removeFromCart(id);
}
}}
checked={checked}
/>
);
};
const mapStateToProps = (state: IState) => {
return {
cart: state.cart.cart,};
};
export default connect(mapStateToProps,{ addToCart,removeFromCart })(
CircleCheckbox
);
以下是显示购物车外观的图像:
如您所见,同一产品(具有不同的时间)被多次放入购物车中。我不希望发生这种情况,并且如果同一产品被两次购买,则想取消选中以前的Checkbox。由于我将Redux存储更改为正确更新,因此当刷新页面时,我得到了所需的结果(请参见下图)
每当切换一个复选框时,如何获得与刷新页面相同的效果?切换另一个同级兄弟时,如何更新同级复选框?
以下是Redux Reducer代码,用于更新组件:
import { ADD_TO_CART,REMOVE_FROM_CART,UPDATE_CURRENCY } from "actions/types";
import { products } from "assets/products";
import Logger from "service/logging/Logger";
const INITIAL_STATE = {
products,currency: "NOK",cart: [],};
export type ICartState = typeof INITIAL_STATE;
export default (state = INITIAL_STATE,action: any) => {
switch (action.type) {
case ADD_TO_CART:
let addedItem = state.products.find((item) => item.id === action.id);
Logger("cart",addedItem?.name + " was added to cart");
const existsInCart = state.cart.some(
(prod: any) => prod.id === action.id
);
if (existsInCart) {
return state;
}
const sameNameInCart = state.cart.some(
(prod: any) => prod.name === addedItem?.name
);
if (sameNameInCart) {
let items_to_keep = state.cart.filter(
(prod: any) => prod.name !== addedItem?.name
);
return {
...state,cart: [...items_to_keep,addedItem],};
}
if (addedItem && addedItem.details !== "Free") {
return {
...state,months: addedItem.period,cart: [...state.cart,};
}
return {
...state,};
case REMOVE_FROM_CART:
let new_items = state.cart.filter((item: any) => item.id !== action.id);
if (action.id === "DBmasker") {
return {
...state,months: 0,cart: new_items,};
}
return {
...state,};
case UPDATE_CURRENCY:
return {
...state,currency: action.currency,};
default:
return state;
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。