在SetInterval方法中没有正确更新React状态

Question

我在UI中有一个按钮，在OnClick事件处理程序中，我必须运行一个设置间隔计时器。在设置间隔计时器中，我检查一个条件，如果条件满足，我将更新状态，但它不能正常工作。

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function Counter() {
  let [count, setCount] = useState(0);
  let [gg, setgg] = useState(false);

  function countdownTimer() {
    console.log(count + gg.toString());
    if (count > 10) {
      setgg(true);
    }
    setCount((count) => count + 1);
  }

  function handleClick() {
    let id = setInterval(countdownTimer, 1000);
  }

  return (
    <div>
      <button onClick={handleClick}>Click</button>
      <h1>{count + gg.toString()}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");

// Second interval to demonstrate the issue.
// Fast updates from it cause the Counter's
// interval to constantly reset and never fire.
setInterval(() => {
  ReactDOM.render(<Counter />, rootElement);
}, 1

00);

在倒计时功能中有一个console.log，它总是打印“0 false”，但UI中的组件网正在更新为正确的数字。

你能告诉我为什么吗

1. 控制台中的计数始终为“0”。log

代码沙盒链接：https://codesandbox.io/s/dank-grass-7o4ms?file=/src/index.js

组件更新正确的屏幕截图，但console.log始终为零。

Answer 1

您需要首先设置count值，然后将其更新为状态，以便您的CountdounTimer应该像

 function countdownTimer() {
    console.log(count + gg.toString());
    if (count > 10) {
      setgg(true);
    }
    setCount(++count);
  }

或

 function countdownTimer() {
    console.log(count + gg.toString());
    if (count > 10) {
      setgg(true);
    }
    count=count+1
    setCount(count);
  }

点击这里进行演示

Answer 2

1. console.log中的计数始终为“0”

包含在updfun回调中的陈旧count状态。

您使用了功能状态更新，因此每个更新都正确地从先前的状态更新，而不是从回调排队时的状态更新。

使用useffect在更新时发出日志状态的副作用，并检查count大于10以设置gg状态。

function Counter() {
  const [count, setCount] = useState(0);
  const [count, setCount] = useState(0);
  const [gg, setgg] = useState(false);

  useEffect(() => {
    console.log(count + gg.toString());
    if (count > 10) {
      setgg(true);
    }
  }, [count, gg]);

  useEffect(() => () => clearInterval(timerRef.current), []);

  function updfun() {
    setCount((count) => count + 1);
  }

  function handleClick() {
    timerRef.current = setInterval(updfun, 1000);
  }

  return (
    <div>
      <button onClick={handleClick}>Click</button>
      <h1>{count + gg.toString()}</h1>
    </div>
  );
}