时间戳

首页 > 解决方案 > setState 不设置状态

javascript - setState 不设置状态

问题描述

大家下午好！

我有一个小问题，我有一个添加到购物车的功能，点击时，我想将 fill 属性更改为 true，然后在点击图标后立即填充，但我的 setState 没有设置！

这是功能：

  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 的属性来的，我映射它们。else 的那个console.log 总是显示该值为false，即使在它设置之后，它会是什么？

谢谢你的关注，抱抱！

标签： javascriptreactjs

解决方案

您的 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！

发生这种情况是因为在第一次运行 (componentDidMount)时foobar未为状态分配值。useState()

您会看到输出[foobar]: One，因为useEffect具有依赖项foobar，每次运行都会foobar更新！它充当观察者。

看到这里的状态流了吗？状态更改的方便useEffect程度如何？watch它对调试很有用，你也应该这样使用！

最后，顺序很重要，因此当按下第二个 CTA 时，您会看到输出内存中的值的输出，console.log(foobar)此时为关于.twouseEffectfoobar[foobar]: One

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

对于这种特殊情况，当您调用时，您将在外部范围内的最后一次调用中foobarHandler传递foobarhastwo和。three在这种情况下（在 foobarHandler 内部），foobar和setFoobar不耦合。

尝试创建一个 useEffect 并添加changeFillCart为依赖项，然后运行 ​​console.log(changeFillCart) ，您会看到它发生了变化。

推荐阅读