反应：更新的状态没有反映在递归 useCallback

Question

我在一个名为 recursively 的 useCallback 挂钩中递增 foo。但是，递增的foo 不会反映在回调中。

const { useState, useCallback } = React;

const App = () => {
  const [foo, setFoo] = useState(0);

  const recursiveCallback = useCallback(() => {
    // always logs 0
    console.log(foo);

    // incrementing foo
    setFoo(foo + 1);

    setTimeout(() => {
      // recursive call
      recursiveCallback();
    }, 250);
  }, [foo]);

  return <button onClick={recursiveCallback}>Click Me</button>;
}

ReactDOM.render(<App />,document.getElementById('root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

Answer 1

尝试更改此行

setFoo(foo + 1);

到

setFoo((foo) => foo + 1);

Answer 2

在日志和 setter 函数中，foo===0 值上都有一个 closure，要修复它，您需要使用 functional update 和 useEffect 进行日志记录：

const { useState, useCallback, useEffect } = React;

const App = () => {
  const [foo, setFoo] = useState(0);

  const recursiveCallback = useCallback(() => {
    setFoo(prev => prev + 1);

    setTimeout(() => {
      recursiveCallback();
    }, 250);
  }, [foo]);

  useEffect(() => {
    console.log(foo);
  }, [foo]);

  return <button onClick={recursiveCallback}>Click Me</button>;
}

ReactDOM.render( < App/> , document.getElementById('root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

Answer 3

1. 您应该使用 useEffect() 和 [foo] 依赖项来查看设置状态后的更改。
2. 更新foo的函数应该是Functional update

如果新状态是使用前一个状态计算的，你可以传递一个 设置状态的函数 该函数将接收以前的值，并返回一个更新的 价值

    // incrementing foo
    setFoo(previousFoo => previousFoo + 1);

注意：如果你没有选择functional update会发生什么？

好吧，如果你选择setFoo(foo + 1);，下一个状态将只有2，之后状态不会改变，useEffect和依赖foo也不受影响。

简而言之，如果你需要一个先前的状态，你必须使用functional update。

const { useState, useCallback, useEffect } = React;

const App = () => {
  const [foo, setFoo] = useState(0);

  const recursiveCallback = useCallback(() => {
    // incrementing foo
    //setFoo(foo + 1);
    setFoo(previousFoo => previousFoo + 1);

    setTimeout(() => {
      // recursive call
      recursiveCallback();
    }, 500);
  }, [foo]);

  useEffect(() => {
    console.log(foo);
  }, [foo]);
  
  return <button onClick={recursiveCallback}>Click Me</button>;
}

ReactDOM.render(<App />,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>