如何在 MERN 堆栈应用程序中进行异步/等待功能直到状态更新

Question

我想让我的函数等待chosenImage 状态更新。我可以在addToCart 函数中看到console.log 中的更新状态，但是里面的console.log 返回空字符串。我怎样才能让它等待状态更新？

这就是我的意思：

const [chosenImage, setChosenImage] = useState('');
    
console.log(chosenImage)
    
const addToCart = (user, product) => {

  console.log(chosenImage)

  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))
}

Answer 1

您需要使用useEffect 来收听该属性的更新。来自the docs：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

基本上你会在useEffect 处理程序中调用你的addToCard 方法。更多信息在这里：How can React useEffect watch and update state?

Answer 2

为了等待状态更新然后执行then函数，你需要使用useEffect将状态作为依赖

...
useEffect(()=>{
   addToCart(user, product)
},[chosenImage])