React useState hook 使用初始状态值并忽略更新

Posted 2023-02-22

【中文标题】React useState hook 使用初始状态值并忽略更新

【英文标题】：React useState hook uses the initial state value and ignores the update

【发布时间】：2021-09-22 23:42:42

【问题描述】：

我已经编写了一个如下所示的组件，其中我使用 React.useState 来控制显示按钮的逻辑。

如果我点击按钮，它会显示一个子按钮，它最初是隐藏的，然后，如果我点击子按钮，它会显示一些内容，但第二个操作永远不会执行。

下面是代码：

我的按钮代码：

    export default observer(function MyButton() 
       ...
       const [subButtonHidden, setSubButtonHidden] = React.useState<boolean>(true)
       ...
       const onClickSubButton = () => 
           if (!subButtonHidden) 
              displaySubButtonContent(); // never ever reach here
           
           setSubButtonHidden(!subButtonHidden);
       

       return (
          <Subbutton
            ...
            subButtonHidden=subButtonHidden
            onClickSubButton=onClickSubButton
          />
       ); 
);

子按钮代码：

export default observer(function SubButton(props: ...) 
    ....
    const onClickSubButton = React.useCallback(() => 
        props.onClickSubButton();
    , []);
    ....
    
    return props.subButtonHidden ? null : (<div>...</div>);

事实证明 subButtonHidden 可以在第一次单击时成功更新为 false，因此显示子按钮，但是如果我单击子按钮，subButtonHidden 将以某种方式重置为 true，如果我再次单击子按钮, subButtonHidden 仍然是 true，即使 setSubButtonHidden(false) 已经被执行，不管它只是不接受更新的值。为什么会这样？

【参考方案1】：

我认为您只是直接更改了一次。相反，你应该 setSubButtonHidden(prev => !prev);

它应该根据它是什么（或曾经是什么）而改变，而不仅仅是直接从原来的那一次改变它。

How to toggle boolean state of react component?

【参考方案2】：

在Subbutton 中，您将onClickSubButton 与useCallback 包装在一起，没有依赖关系。这意味着它从未改变。这意味着props.onClickSubButton 在onClickSubButton 内永远不会更改。

所以第一次点击的时候，subButtonHidden 被发现为真，设置为假。当您第二次单击时，由于 onClickSubButton 由于 useCallback 而未更新，这意味着调用了相同的 props.onClickSubButton，其中 subButtonHidden 为 true（因为闭包）。

因此，删除 onClickSubButton 周围的 useCallback 应该可以解决您的问题。

【讨论】：

知道了。我发现在实际代码中它使用类似 const onClickSubButton = React.useCallback(() => props.onClickSubButton(123); , [123]);所以它在 deps 中是一个常量，并且出于同样的原因不会更新。