如何解决在 MERN 应用程序中反应 useEffect 警告:无法对未安装的组件执行反应状态更新
我在这里的某个地方收到了这个警告,但我不知道为什么。我需要一些帮助来解决导致问题的原因。产品可以添加到数据库中,但我无法显示新添加的产品,直到我退出用户并再次登录,然后用户的购物车显示更新:
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
听起来像一个变量,而不像一个更新函数。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。