setState 未设置 state

Question

Good afternoon everyone!

I have a little problem, I have a function to add to the cart and when clicking, I wanted to change the fill property to true and then fill as soon as the icon is clicked, but my setState is not setting!

This is the 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],
  );

And that's her call:

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

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

</div>

The setChangeFillCart and changeFillCart are coming via the properties of a fetch and I map them. That console.log of else always shows that the value is false, even after its set, what could it be?

I thank you for your attention, hugs!

Answer 1

changeFillCart is a local variable. It's probably defined with a const , and even if it's a let it's never going to change anyway. setChangeFillCart does not attempt to change your local variables. Putting a log statement where you did is only ever going to log out what changeFillCart was equal to when loggedToAddCart was created

The purposes of setChangeFillCart is to tell react to rerender the component. When that second render happens, a new local variable will be created which will get the new value. This variable is visible to anything created on that second render, not to things created on the first render. So if you want to see the new value, put your log statement in the body of the component so you can see what value it's rerendering with.

Answer 2

Your setState should be setting actually, I'll demonstrate it in a few steps and how to debug your issue in a sane matter, to help you fix this issue and in future cases...

Let's look at a practical example. Start by looking at the following:

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

Which outputs the following on load:

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

If you click the first CTA:

[foobar]:  two 

and after, the second CTA, you get:

two 
[foobar]:  third 

If you click the second CTA again, you get:

third 

When the application first runs, the useEffect is executed and you get undefined . Followed by [foobar]: One !

This happens because the foobar state is not assigned a value in the useState() on the first run (componentDidMount).

You see the output [foobar]: One because of the useEffect that has the dependency foobar , which runs every time foobar is updated. It acts as a watcher.

See the state flow here? How handy the useEffect can be to watch for state changes? It's useful to debug and you should use as such too!

Finally, the order matters, so when the second CTA is pressed you see the output of the console.log(foobar) that outputs the value in memory that at this time is two , followed immediately by the useEffect that executes changes because it watches foobar just like the first case I've exposed about [foobar]: One .

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

For this particular case, when you call foobarHandler , you are passing foobar that has two and in the last call three in the outer scope. In this context (inside the foobarHandler), the foobar and setFoobar are not coupled.

Try to create a useEffect and add changeFillCart as a dependency, and run a console.log(changeFillCart) and you'll see it changes.