如何解决如何使功能等待直到 MERN 堆栈应用程序中的状态更新
如何让我的函数 addToCart
等到 chosenImage
状态更新?在函数外的第一个console.log中,我可以看到更新的状态,但是里面的console.log返回空字符串。
注意:addToCart
函数和状态与更新状态的按钮不在同一目录中。
const [chosenImage,setChosenImage] = useState('');
console.log(chosenImage)
useEffect(() => {
function addToCart(user,product) {
const cartProduct = {
_id: product._id,name: product.name,description: product.description,processor: product.processor,ram: product.ram,storage: product.storage,price: product.price,type: product.type,likes: product.likes,colors: product.colors,images: chosenImage
}
fetch(`${API}/cart/usercart`,{
method:"POST",headers: {
'Content-Type': 'application/json'
},body: JSON.stringify([user._id,cartProduct])
})
.then(response => response.json())
.then(response => {
const updatedCart = response.cart;
setUser(oldState => ({...oldState,cart: [updatedCart]}))
localStorage.setItem("cart",JSON.stringify(updatedCart))
})
.catch(error => console.log(error))
}
},[chosenImage])
解决方法
使用 useEffect 钩子。
useEffect(()=> addToCart(user,product);,[选择的图片]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。