setState 未設置 state

Question

大家下午好！

我有一個小問題，我有一個 function 要添加到購物車，單擊時，我想將填充屬性更改為 true，然后在單擊圖標后立即填充，但我的 setState 沒有設置！

這是 function：

  const loggedToAddCart = useCallback(
    (brandName, productId, setChangeFillCart, changeFillCart) => {
      if (!uid) {
        setMessageToast('Register to save photos and see prices');
        setOpenToast(true);
        setChangeFillCart(false);
        return;
      }
      if (cartIds.includes(productId)) {
        setChangeFillCart(false);
        deleteFromCart(brandName, productId);
      } else {
        setChangeFillCart(true);
        console.log(changeFillCart);

        addToCart(brandName, productId);
      }
    },
    [cartIds],
  );

這就是她的電話：

<div onClick={() => loggedToAddCart(brandName, productId, setChangeFillCart, changeFillCart)}>

 <Icon type="shoppingBag" size={24} strokeWidth={1} fill={cartIds.includes(productId) || changeFillCart} />

</div>

setChangeFillCart 和 changeFillCart 是通過 fetch 的屬性來的，我是 map 它們。 else 的那個console.log 總是顯示該值為false，即使在它設置之后，它會是什么？

謝謝你的關注，抱抱！

Answer 1

changeFillCart是一個局部變量。 它可能是用const定義的，即使它是let它也永遠不會改變。 setChangeFillCart不會嘗試更改您的局部變量。 在您所做的地方放置一個日志語句只會注銷changeFillCart在創建時loggedToAddCart的內容。

setChangeFillCart的目的是告訴 react 重新渲染組件。 當第二次渲染發生時，將創建一個新的局部變量，該變量將獲取新值。 此變量對在第二次渲染上創建的任何東西都是可見的，而不是對在第一次渲染上創建的東西可見。 因此，如果您想查看新值，請將您的日志語句放在組件的主體中，這樣您就可以看到它正在重新渲染的值。

Answer 2

您的 setState 應該實際設置，我將通過幾個步驟演示它以及如何在理智的情況下調試您的問題，以幫助您解決此問題以及在未來的情況下......

讓我們看一個實際的例子。 首先查看以下內容：

export default function App() {
  const [foobar, setFoobar] = useState()

  useEffect(() => {
    setFoobar("One")
    console.log("[foobar]: ", foobar)
  }, [])

  useEffect(() => {
    console.log("[foobar]: ", foobar)
  }, [foobar])

  const foobarHandler = useCallback((setFoobar, foobar) => {
    setFoobar("third")
    console.log(foobar)
  })

  return (
    <div className="App">
      <button onClick={() => setFoobar("two")}>click</button>
      <button onClick={() => foobarHandler(setFoobar, foobar)}>click</button>
    </div>
  );
}

在負載時輸出以下內容：

[foobar]:  
undefined
[foobar]:  
undefined
[foobar]:  One 

如果單擊第一個 CTA：

[foobar]:  two 

在第二個 CTA 之后，您將獲得：

two 
[foobar]:  third 

如果再次單擊第二個 CTA，您將獲得：

third 

當應用程序第一次運行時， useEffect被執行並且你得到undefined 。 跟着[foobar]: One ！

發生這種情況是因為foobar state 在第一次運行 (componentDidMount) 時未在useState()中分配值。

您會看到 output [foobar]: One ，因為useEffect具有依賴項foobar ，它在每次更新foobar時運行。 它充當觀察者。

在這里看到 state 流程？ watch state 變化的useEffect有多方便？ 它對調試很有用，你也應該這樣使用！

最后，順序很重要，所以當第二個 CTA 被按下時，你會看到console.log(foobar)的 output 輸出 memory 中的值，此時是two ，然后是執行更改的useEffect因為它監視foobar就像我公開的第一個案例[foobar]: One一樣。

  <button onClick={() => foobarHandler(setFoobar, foobar)}>click</button>

對於這種特殊情況，當您調用foobarHandler時，您傳遞的foobar在外部 scope 中具有two和最后一個調用three 。 在這種情況下（在 foobarHandler 內部）， foobar和setFoobar沒有耦合。

嘗試創建一個 useEffect 並將changeFillCart添加為依賴項，然后運行 console.log(changeFillCart) 你會看到它發生了變化。