使用 setInterval 和 clearInterval 更改 React 应用程序中的计数器

Question

我正在尝试创建一个带有 'bathtub' 和 2 个按钮的应用程序。浴缸有 5 个水位。当您单击第一个按钮时，浴缸每 2 秒填充一个水位，直到达到 5。另一个按钮排空浴缸直到水位 0。increaseWaterLevel 和 decreaseWaterLevel 函数只触发一次，我不确定为什么。

import React, { useState } from "react";

const App = () => {
  const [waterLevel, setWaterLevel] = useState(0);
  let fillTub;
  let drainTub;
  const increaseWaterLevel = () => {
    if (waterLevel < 5) {
      const newWaterLevel = waterLevel + 1;
      setWaterLevel(newWaterLevel);
    } else {
      clearInterval(fillTub);
    }
  };

  const decreaseWaterLevel = () => {
    if (waterLevel > 0) {
      const newWaterLevel = waterLevel - 1;
      setWaterLevel(newWaterLevel);
    } else {
      clearInterval(fillTub);
    }
  };

  return (
    <div>
      <div>Bathtub</div>
      <button
        onClick={() => {
          fillTub = window.setInterval(increaseWaterLevel, 2000);
        }}
      >
        increaseWaterLevel
      </button>
      <button
        onClick={() => {
          drainTub = window.setInterval(decreaseWaterLevel, 2000);
        }}
      >
        decreaseWaterLevel
      </button>
    </div>
  );
};

export default App;

update 计数器正在工作但没有停止，waterLevel 保持在 0。我做错了什么？

import React, { useState } from "react";

const App = () => {
  const [waterLevel, setWaterLevel] = useState(0);
  const [intervalId, setIntervalId] = useState(0);

  const increaseWaterLevel = () => {
    const newWaterLevel = setInterval(() => {
      if (waterLevel > 4) {
        clearInterval(intervalId);
      } else {
        setWaterLevel((prevWaterLevel) => prevWaterLevel + 1);
      }
    }, 2000);
    setIntervalId(newWaterLevel);
  };

  const decreaseWaterLevel = () => {
    const newWaterLevel = setInterval(() => {
      if (waterLevel > 0) {
        setWaterLevel((prevWaterLevel) => prevWaterLevel - 1);
      } else {
        clearInterval(intervalId);
      }
    }, 2000);
    setIntervalId(newWaterLevel);
  };

  return (
    <div>
      <div>Bathtub</div>
      <button onClick={increaseWaterLevel}>increaseWaterLevel</button>
      <button onClick={decreaseWaterLevel}>decreaseWaterLevel</button>
    </div>
  );
};

export default App;

Answer 1

Let me first say that i started learning react like 1 week ago and i still have some doubt and this code may be really bad even if it works, but i still want to help so this is the code.

这里的主要问题是 useState 函数是一个 async 函数，它不会实时更新你的变量，所以在这种情况下检查 waterLevel 值而不用useEffect 将不起作用。

import React, { useState, useEffect } from "react";

const App = () => {
const [waterLevel, setWaterLevel] = useState(0);
const [actionType, setActionType] = useState();

useEffect(() => {
  const interval = setInterval(() => {
    if (actionType == "increase" && waterLevel < 5)
      setWaterLevel(waterLevel + 1);
    if (actionType == "decrease" && waterLevel > 0)
      setWaterLevel(waterLevel - 1);
  }, 2000);
  return () => clearInterval(interval);
}, [actionType, waterLevel]);

return (
   <div>
   <div>Bathtub</div>
   <button onClick={() => setActionType("increase")}>
     increaseWaterLevel
   </button>
   <button onClick={() => setActionType("decrease")}>
     decreaseWaterLevel
   </button>
   <h1>{waterLevel}</h1>
 </div>
 );
};

export default App;

使用 setInterval 和 clearInterval 更改 React 应用程序中的计数器

using setInterval and clearInterval to change counter in react app

javascript

setinterval

reactjs

use-state