javascript - react : Updated state not reflecting in recursive useCallback

Question

我正在递增 foo在 使用回调 Hook 称为 递归 .但是，增加的 foo不会反射(reflect)在回调中。

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

你有一个 closure在 foo===0在日志和 setter 函数中的值，要修复它，您需要使用 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>