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) 你会看到它发生了变化。