React Native：useState 没有正确更新

Question

我是 react-native 的新手，有点卡住了。问题很简单，我尝试更新我的产品数量状态，因此可以计算总数，但在更新产品数量之前，我的总数是根据以前的产品数量计算的。

    // initially I set my products from a Global List known as cart
    const [products, setProducts] = useState(Global.cart);

    const updateQuantity = (item, qty) => {
      const product_index = products.findIndex(
        (product) =>
          product.id === item.id &&
          product.size === item.size &&
          product.color === item.color
      );
      const current_product = products[product_index];
      if (current_product.quantity + qty != 0) {
        if (current_product.quantity + qty <= 5) {
          const new_product = {
            ...products[product_index],
            quantity: current_product.quantity + qty,
          };
          const new_products = [...products];
          console.log("new_product--", new_products);
          new_products.splice(product_index, 1, new_product);
          console.log("new_product", new_products);
          setProducts(new_products);
          Global.cart = new_products;
          // updating the total as quantity updates of a single product
          calculateTotal();
        } else {
          alert("Can not add more quantity.");
        }
      } else if (current_product.quantity + qty == 0) {
        // removing the item from cart
        showRemoveAlert(item);
      }
    };

    const [total, setTotal] = useState(0);
      const calculateTotal = () => {
      var temp_total = 0;
      for (let product of products) {
        temp_total = temp_total + product.quantity * product.price;
      }
      setTotal(temp_total);
    };

    // calculating the total first time as the screen loads
    useEffect(() => {
      calculateTotal();
    }, []);

我在调用 calculateTotal 之前更新产品，因此我应该获得更新后的总数，但问题是 calculateTotal 是在产品的先前状态上执行的。为什么不首先更新产品的状态？我做错了什么？

我不会添加屏幕的整个设计和在屏幕上呈现的单个项目。如果仍然需要，请告诉我，我会相应地添加。

Answer 1

当 updateQuantity 在更新状态后退出时，当您调用 calculateTotal 函数时，该函数将仅具有先前的状态，因此您可以使用 useMemo 钩子在产品更新时获取总数，而不是为总计创建状态。

示例如下：

export default function App() {
  const [products, setProducts] = React.useState([{price: 2, quantity: 1}])

  
  // Chage this internal for loop as required
  const {total} = React.useMemo(() => {
    let total = 0;
    products.forEach(({price, quantity}) => {
      total += price * quantity
    
    })
      return {total}
  }, [products])

  const increase= () => {
    setProducts([{price: 2, quantity: 2}])
    calculateTotal()
  }

  const calculateTotal =() => {
    console.log(products)
  }

    return (
    <View style={styles.container}>
      <Text onPress={increase} style={styles.paragraph}>
       Price: {total || 0}
      </Text>
     
    </View>
  );
}

小吃link：https://snack.expo.io/@ashwith00/ranting-nachos

React Native：useState 没有正确更新

React Native: useState not updating properly

react-native

use-state