**已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。
这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
8小时前关门了。
Improve this question
为什么我的删除功能不是删除我点击的实际产品,而是删除其他产品,但当我console.log()
项目时,它显示正确的ObjectId
这是我的按钮,我传递id
和price
<Button color="error"
onClick={() => handleClick(product._id, product.price)} startIcon=
{<DeleteIcon />}
variant="contained">
Remove
</Button>
我正在使用的函数。
const handleClick =(id,price) =>{
const itemPrice = Number(price)
dispatch(deleteProduct({id,quantity: cart.quantity, price: itemPrice}))
}
cartSlice.js
const cartSlice = createSlice({
name: "cart",
initialState: {
products: [],
quantity: 0,
total: 0
},
reducers: {
resetStateCart: (state) => {
state.products = [];
state.quantity = 0;
state.total = 0
},
addProduct: (state,action) =>{
state.quantity += 1;
state.products.push(action.payload);
state.total += action.payload.price * action.payload.quantity
},
deleteProduct: (state,action) =>{
state.quantity -= 1;
state.products.splice(state.products.findIndex((arrow) => arrow._id === action.payload),1)
state.total = (action.payload.quantity-1) * action.payload.price
}
}
})
例如,我删除了product 1 2
但其他产品被删除
编辑:附加信息
{cart.products.map((product, i) =>(
<TableRow key={i}>
<TableCell>
</TableCell>
<TableCell>
<Box sx={{display: 'flex', alignItems:'center', gap: 2}}>
<Box component="img" src={product.img} />{product.title}
</Box>
</TableCell>
<TableCell>₱ {product.price}</TableCell>
<TableCell>{product.quantity}</TableCell>
<TableCell>₱ {Number(product.quantity *
product.price)}</TableCell>
<TableCell>
<TextField
required
variant="outlined"
value={orderSummary.location || ""}
placeholder='Click Order'
disabled />
</TableCell>
<TableCell>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateTimePicker
label="Click Order to change date"
value={value || ""}
onChange={handleChange}
disabled
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider><Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Typography id="modal-modal-title" variant="h6" component="h2">
Confirm Location & Time (For Security Purposes)
</Typography>
<Box sx={{display: 'flex', flexDirection:'column',marginTop: 5, gap: 5, justifyContent:
'start'}}>
<Box sx={{display: 'flex', alignItems:'center',gap: 5}}>
<Typography variant="h6" color="text.secondary">
Location:
</Typography>
<TextField
onChange={(e) => setOrderSummary({location: e.target.value})}
required
variant="standard"
placeholder='e.g gym, guardhouse, canteen' />
</Box>
<Box sx={{display: 'flex', alignItems:'center',gap: 5}}>
<Typography variant="h6" color="text.secondary">
Time:
</Typography>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateTimePicker
label="Date&Time picker"
value={value || ""}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</Box>
<hr/>
<Box sx={{display: 'flex', alignItems:'center' ,gap: 1}}>
<Typography variant="subtitle1" fontWeight={700} color="text.secondary">amount to Pay: </Typography>
<Typography variant="h6">₱ {Number(product.quantity * product.price)}</Typography>
</Box>
<Button variant="contained" onClick={(e) =>confirmProduct(product._id, product.title, Number(product.quantity * product.price ),
product.quantity, product.price)}>
Confirm Order
</Button>
</Box>
</Box>
</Modal>
</TableCell>
<TableCell>
<Box sx={{display: 'flex', alignItems:'center', gap: 1}}>
<Button color="success" variant="contained" onClick={handleOpen}
startIcon={<BorderColorIcon />}
>
Order
</Button>
<Button color="error" onClick={(e) =>
handleClick(product._id, product.price)} startIcon=
{<DeleteIcon />}
variant="contained">
Remove
</Button>
</Box>
</TableCell>
</TableRow>
))}
1条答案
按热度按时间mwkjh3gx1#
在您的deleteProduct方法中存在问题。您是否匹配发送对象{id,quantity:购物车.数量,价格:itemPrice}在方法中.而不是与产品id比较,你将它与整个有效负载比较.它应该是action.payload. id.在你的情况状态.products.findIndex((arrow)=〉arrow._id === action.payload)return-1所以splice删除状态中的最后一个产品.products