反应：无法在 setInterval 中获取状态

Question

我有一个需要调用 setInterval 的按钮，但如果已经设置了间隔，那么我不想启动另一个 setInterval。

这就是我实现它的方式 ():

export default function App() {
  const [intervalId, setIntervalId] = useState(null);

  const startInterval = () => {
    console.log("inside startInterval", intervalId);
    if (!intervalId) {
      console.log("starting Interval", intervalId);
      const _intervalId = setInterval(() => {
        console.log("Interval Id inside setInterval is", intervalId);
      }, 2 * 1000);
      setIntervalId(_intervalId);
    } else {
      console.log("Rejecting set interval");
    }
  };

  const onBtnClick = () => {
    console.log("btn clicked");
    // make API call
    startInterval();
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={onBtnClick}>Click Me</button>
    </div>
  );
}

但在 setInterval 中，我总是能看到状态的默认值，即在我的例子中为 null。如何访问 setInterval 中的最新值？

Click here to go to Live Code Sandbox

Answer 1

您的代码正在运行。虽然 log 将 intervalId 显示为 null，但这只是因为当 intervalId 确实是 null.

用const声明的变量不能被重新赋值；当单击按钮时，intervalId 在渲染期间以 null 开始，并且 startInterval 函数关闭 null。当调用 startInterval 时，匿名回调被声明为：

() => {
  console.log("Interval Id inside setInterval is", intervalId);
}

它仍然关闭 null intervalId。

如果您想在回调中查看间隔 ID，请改用 ref。

const intervalIdRef = useRef();
// ...
intervalIdRef.current = setInterval(() => {
  console.log("Interval Id inside setInterval is", intervalIdRef.current);
}, 2 * 1000);

并在需要的地方使用 intervalIdRef.current 而不是 intervalId。

反应：无法在 setInterval 中获取状态

React: unable to fetch state inside setInterval

javascript

reactjs

react-hooks

react-state