useCallback不叫setState

Question

当我使用useCallback钩子的反应时，我面临一个问题。当我使用普通箭头函数时，它会调用setSlimSideBar(!slimSideBar)，但是useCallback不会按预期调用或不设置值。

const [slimSideBar, setSlimSideBar] = useState(true)

此设置状态与预期相同。

const toggle = () => {
    console.log(slimSideBar)
    console.log(!slimSideBar)

    setSlimSideBar(!slimSideBar)
}

下面的函数没有像我预期的那样设置状态。

 const toggle = React.useCallback(() => {
        console.log(slimSideBar)
        console.log(!slimSideBar)

        setSlimSideBar(!slimSideBar)
    },[setSlimSideBar])

知道为什么useCallback不调用setSlimBar函数吗？

Answer 1

useCallback所做的是，如果其依赖数组中的任何项自上次呈现以来发生了更改(本质上是=== )，它将返回传递给它的新函数。状态设置器是稳定的引用；在组件的整个生命周期中，您的setSlimSideBar将引用完全相同的函数。因此：

const toggle = React.useCallback(() => {
    // ...
},[setSlimSideBar])

因为依赖数组中唯一的项从未改变，所以useCallback返回的函数永远不会改变。

将slimSideBar添加到依赖数组中，以便当其更改时，返回的函数也会发生变化。

const toggle = React.useCallback(() => {
    // ...
},[slimSideBar, setSlimSideBar]);

或者使用状态设置器的回调形式，这样您就不必依赖外部状态变量是最新的。

const toggle = React.useCallback(() => {
    setSlimSideBar(slimSideBar => !slimSideBar);
},[setSlimSideBar]);