React useState 异步更新和 for 循环

Question

我有一个看似基本的问题，它总是让我的项目重新设置 -- useState 没有为我正确呈现。

这里是问题的简化版本：

function App() {
  const [count, setCount] = React.useState(0);

  function TestFunction() {
    for (let i = 0; i < 10; i++) {
      setCount((curr) => curr + 1);
      console.log(count);
    }
  }

  return (
    <>
      <h3>Count = {count}</h3>
      <button onClick={() => TestFunction()}>Click</button>
    </>
  );
}

export default App;

单击按钮后，状态设置为 10，但 console.log() 未正确更新。

感谢任何帮助。

谢谢

-S

Answer 1

我希望这能回答您的问题

首先，您正在记录尚未针对当前渲染更新的计数。所以基本上 console.log 落后了一步。检查下面的代码，这可能会让您明白一切。


function Temp() {
const [count, setCount] = React.useState(0);

function TestFunction() {
 for (let i = 0; i < 10; i++) {
   setCount((curr) => {
     console.log(curr);
     return curr + 1;
   });
   console.log(count);
 }
}

return (
 <>
   <h3>Count = {count}</h3>
   <button onClick={() => TestFunction()}>Click</button>
 </>
);
}

export default Temp;```

Answer 2

您正在记录 count，然后它才更新为最新值。简单地说，当 setCount 被调用时，React 存储提供给它的值直到下一次渲染。当下一次渲染发生时，count 值将被更新。

在我下面的示例中：

下面的useEffect每次更新state都会命中
setState(curr=>curr+1) 会通知您当前的~下一个~状态值是什么。

const {
  useState,
  useEffect
} = React;

function App() {
  const [state, setState] = useState(0);

  // Console.log on state update
  useEffect(()=>{
    console.log(`useEffect: ${state}`);
  },[state]);


  function TestFunction() {
    for(let i = 0; i < 10; i++) {
      setState((curr)=>{
        console.log(`setState(nextValue): ${curr+1}`);
        return curr+1;
      });
    }
  }

  return (
    <div>
      <h3>Count = {state}</h3>
      <button onClick={TestFunction}>Click</button>
    </div>
  );
}

const el = document.querySelector("#root");
ReactDOM.render(<App/>, el);

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

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

希望澄清事情。

React useState 异步更新和 for 循环

React useState async updating and for-loop

asynchronous

for-loop

reactjs

use-state