reactjs 为什么我的删除功能不能删除我点击的商品?[closed]

hrirmatl  于 2023-01-04  发布在  React
关注(0)|答案(1)|浏览(115)

**已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
8小时前关门了。
Improve this question
为什么我的删除功能不是删除我点击的实际产品,而是删除其他产品,但当我console.log()项目时,它显示正确的ObjectId
这是我的按钮,我传递idprice

<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>
 ))}
mwkjh3gx

mwkjh3gx1#

在您的deleteProduct方法中存在问题。您是否匹配发送对象{id,quantity:购物车.数量,价格:itemPrice}在方法中.而不是与产品id比较,你将它与整个有效负载比较.它应该是action.payload. id.在你的情况状态.products.findIndex((arrow)=〉arrow._id === action.payload)return-1所以splice删除状态中的最后一个产品.products

相关问题