MERN App 中的 React useEffect 警告：无法对未安装的组件执行 React 状态更新答案

【问题标题】：React useEffect warning in MERN App: Can't perform a React state update on an unmounted componentMERN App 中的 React useEffect 警告：无法对未安装的组件执行 React 状态更新
【发布时间】：2023-03-06 14:12:01
【问题描述】：

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

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
}

【问题讨论】：

标签： node.js reactjs mongodb express mern

【解决方案1】：

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

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

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

【讨论】：

我也有同样的效果
有没有可能是因为我现在将用户模型保存在本地存储中？