当 if 条件为真时，用 useEffect 编写的函数打印一个值两次。任何人都可以帮我解决吗？

Question

我想为任务创建一个提醒功能。基本上这个想法是，在我的笔记应用程序中，当任何用户创建他们的任务时，那时我会从中询问提醒日期时间，然后将其存储到数据库中，当该日期时间到来时，我将推送该特定的电子邮件注意.
为了实现这一点，我的逻辑是我以秒为单位转换数据库提醒日期时间，然后获取当前日期时间并将其转换为秒。之后我进行操作 - let msgTime = remind - currentDateSec。其中 currentDateSec 是当前日期时间，remind 是数据库日期时间。然后将其存储在 msgTime 变量中。
当msgTime == 0时，我会将提醒邮件推送到用户注册邮件ID。但是我在这里出于测试目的写了 Hi 并且这个 Hi 在控制台中打印了 2 次，我不想要它。我只想打印一次。

为了检查每一秒，我在 setinterval 中调用了我的函数，并在 1000 毫秒后运行它。

  const [notes, setNotes] = useState([]);

  useEffect(() => {
  function checkReminder() {
    let remind = 0;
    let currentDate = new Date();
    let currentDateSec = Math.floor(currentDate.getTime() / 1000);

    for (let index = 0; index < notes.length; index++) {
      remind = notes[index].reminderTime;
      let msgTime = remind - currentDateSec;
      console.log(msgTime);

      if (msgTime === 0) {
        console.log("hi");
        clearInterval(interval);
      }
    }
  }
  const interval = setInterval(() => {
    checkReminder();
  }, 1000);
})

此代码用于从数据库中获取笔记。

const fetchNotes = async () => {
    try {
      let res = await axios.get("/api/notes", config);
      setNotes(res.data);
      // console.log(notes); 
    } catch (err) {
      setError(err.response.res);
    }
  };

在这里查看终端输出 - Terminal output

注意：我已经删除了React.StrictMode

Answer 1

将此 return 语句添加到您的 useEffect 函数中，您会没事的：

useEffect(() => {
        function checkReminder() {
            let remind = 0;
            let currentDate = new Date();
            let currentDateSec = Math.floor(currentDate.getTime() / 1000);

            for (let index = 0; index < notes.length; index++) {
                remind = notes[index].reminderTime;
                let msgTime = remind - currentDateSec;
                console.log(msgTime);

                if (msgTime === 0) {
                    console.log("hi");
                    clearInterval(interval);
                }
            }
        }
        const interval = setInterval(() => {
            checkReminder();
        }, 1000);

        return () => {
            clearInterval(interval);
        };
    })

有时需要 return 来自 useEffect 的清理功能以避免进一步触发。

当 if 条件为真时，用 useEffect 编写的函数打印一个值两次。任何人都可以帮我解决吗？

A function written in useEffect printing a value twice when the if condition got true. Can anyone help me to solve it?

setinterval

reactjs

use-effect