在 MERN 应用程序中反应 useEffect 警告：无法对未安装的组件执行反应状态更新

编程问答 2022-05-11

问题描述

我在这里的某个地方收到了这个警告，但我不知道为什么。我需要一些帮助来解决导致问题的原因。产品可以添加到数据库中，但我无法显示新添加的产品，直到我退出用户并再次登录，然后用户的购物车显示更新：

const Cart = props => {

    const [products,addedProducts] = useState([])
    
    useEffect(() => {
        addedProducts(user.cart)
    },[])
    
    const onRemove = () => toast.error('Product removed from cart!',{
        position: "top-right",autoClose: 2000,hideProgressBar: true,cloSEOnClick: true,pauSEOnHover: false,draggable: true,progress: undefined,});
    
    const handleRemove = (id) => {
        fetch(`${API}/cart/${id}/delete`,{
            method: 'POST'
        }).then(() => {
            onRemove();
            const timer = setTimeout(() => {
                props.history.push('/cart')
            },500)
            return () => clearTimeout(timer)
        })
    };

这是我的购物车控制器：

router.post('/usercart',async (req,res) => {
    const [userId,cart] = req.body
    console.log(req.body,'ccccc')
    try {
        console.log(req.body,'aft')
        let userCart = await cartService.cart([userId,cart])
        res.status(200).json({userCart})
        } catch (error) {
        res.status(401).json({ error: error })
    }
})

这是我的购物车服务：

const cart = async ([userId,cart]) => {
    let userCart = await User.updateOne({_id: userId},{$push: {cart: cart}})
    return userCart
}

解决方法

首先，为什么需要useEffect？你基本上只填充一个状态。所以直接写：

const [products,setProducts] = useState(user?.cart || [])

如果可以，我建议您将 addedProduct 重命名为 setProducts。如果您的代码增长，则很容易混淆变量名称。 addedProducts 听起来像一个变量，而不像一个更新函数。

expressexpressexpressmernmongodbmongodbreactjsreactjsreactjsreactjs