如何使功能等待直到 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);,[选择的图片]);