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) 会通知您当前 ~next~ 状态值是什么。

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>

希望能澄清事情。

反应 useState 异步更新和 for 循环

2 个答案: