setState 在 useEffect 后不更新狀態

Question

我正在制作一個購物車應用程序，我有一個變量可以遍歷所有價格並獲取購物車的總價格。 我試圖讓總金額通過 setTotals 更新總狀態，但是當從購物車中刪除項目時總變量本身會更新，調用 setTotals(total) 不會更新狀態。 它保持渲染時的初始狀態（購物車中所有價格的總價）。

我的狀態聲明：

const [totals, setTotals] = useState()

從價格數組中獲取總數：

 var total = 0
    for (var i = 0; i < prices.length; i++) {
        total += prices[i];
    }

在 useEffect 中調用 setTotals：

   useEffect(() => {
    setTotals(total) <-- From the loop above
    setCartCopy([...deepCartCopy])
}, [totals])

有人可以幫忙嗎？

Answer 1

  const [finalTotal, setFinalTotal] = useState(0);

  let total = 0;
  for (let i = 0; i < prices.length; i++) {
    total += prices[i];
  }

  useEffect(() => {
    setFinalTotal(total);
  }, [total, setFinalTotal]);

https://codesandbox.io/s/stackoverflowhelp-i70fd?file=/src/App.js

Answer 2

我認為你的卡片代碼方法不是很好的方法。

在這里，您總是有兩次相同的信息：您獲得total ，然后設置具有相同結果的totals 。 您可以通過僅保留兩個變量之一來簡化。

此外，您的代碼無法正常工作，因為 useEffect 永遠不會被執行：因為您將totals作為依賴項，但它永遠不會改變。 即使您在其他地方更改totals ，您也會有一個無限循環，因為在 useEffect 中，取決於totals的更改，它會更改它的值，這將執行更改totals等的 useEffect，無限循環。

我認為您的循環也應該在沒有依賴關系的 useEffect 中，因為它只會在第一次渲染時執行。

我會這樣做，也許可以改進代碼：

  const [prices, setPrices] = useState([1, 3, 6, 39, 5]);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    // Sets total with already present products in the card
    // This useEffect is called only at the first render
    prices.forEach((price) => {
      setTotal((total) => total + price);
    });
  }, []);

  useEffect(() => {
    setTotal((total) => total + prices[prices.length - 1]);
     // Called when prices values changes, like if you're adding a product to your card
     // It keeps your total updated
  }, [prices]);

  const addPrice = () => {
    // Simulate a new product in your card
    setPrices((prices) => [...prices, Math.floor(Math.random() * 10)]);
  };

  return (
    <div className="App">
      <p>total: {total}</p>
      <button onClick={() => addPrice()}>add price</button>
    </div>
  );

我希望我的回答很清楚，哈哈