Тайм-аут не очищается в реакционных хуках - компонент функции

Question

Я пытаюсь внедрить простые обновления в компонент функции в реакции и, похоже, наткнулся на некоторые базовые c логические ошибки с моей стороны. Можете ли вы помочь?

Мой код:

import React, { useState } from "react";
import "./App.css";

var timeout;  // this variable wasn't scoped inside the function?.

function App() {
  const [name, setUserName] = useState("");

  const [password, setUserPassword] = useState("");

  const [showHackMessage, setShowHackMessage] = useState(false);

  const enterUserName = e => {
    console.log(e.target.value);
    setUserName(e.target.value);
  };

  const enterUserPassword = (e) => {

    console.log(e.target.value,timeout);
    setUserPassword(e.target.value);
    if (e.target.value.length > 0) {
      timeout= setTimeout(()=>setShowHackMessage(true), 1000);
      console.log(timeout);

      /// Why did not  timeout= setTimeout(setShowHackMessage(true), 5000); work? is  setShowHackMessage not a function?
      //  timeout();
    } 
    else if(e.target.value.length===0) {
      console.log("Tricky user!");
      console.log(timeout,'L29>>');
      //not working perfectly!
      clearTimeout(timeout);
      setShowHackMessage(false);
    }
  };

  return (
    <div className="App">
      <p>Login-Hacker</p>
      <input name={"email"} onChange={enterUserName}></input>
      <br></br>
      <br></br>

      <input name={"password"} onChange={(e)=>enterUserPassword(e)}></input>
      <p>Powered by Saurabh</p>
      {name.length > 0 && <p>Your name is {name}</p>}
      {password.length > 0 && <p>Your password is {password}</p>}
      {showHackMessage && <p className='awesome'>Now you are hacked!</p>}
    </div>
  );
}

export default App;

Поэтому мой первый вопрос будет: -

1. Почему я должен использовать обратный вызов, пока определить функцию settate в settimeout? Я пытался

   timeout = setTimeout (setShowHackMessage (true), 1000); и это не сработало, пока

   timeout = setTimeout (() => setShowHackMessage (true), 1000); работает отлично. Является ли setShowHackMessage (в useState не функцией?)

2. Если я определяю переменную time var timeout внутри функции, cleartimeout не работает (отображается как undefined в консоли), но работает отлично если я определю это вне функции, как в коде. Является ли вся функция "визуализированной" после установки (следовательно, теряет предыдущий экземпляр времени ожидания переменной?). Должен ли я использовать ссылки для этого?

   Спасибо.

Answer 1

Это более простая версия. Я удалил переменную timeout, так как не понимаю, зачем вы ее используете.

        import React, { useState, useCallback } from "react";
// import "./App.css";

// let timeout;  // this variable wasn't scoped inside the function?.
const EMPTY_STRING = "";

function App() {
const [name, setUserName] = useState("");
const [password, setUserPassword] = useState("");
const [showHackMessage, setShowHackMessage] = useState(false);
const [timer, setTimer] = useState(null);

const enterUserName = useCallback(
    value => {
    console.log(value);
    setUserName(value);
    },
    [setUserName]
);

const enterUserPassword = useCallback(
    value => {
    setShowHackMessage(false);
    setUserPassword(value);
    console.log("password value", value);
    if (timer) {
        console.log("clear Timer=>", timer);
        clearTimeout(timer);
    }
    if (value !== EMPTY_STRING) {
        setTimer(setTimeout(() => setShowHackMessage(true), 5000));
        console.log("set Timer=>", timer);
    }
    console.log("password", password);
    },
    [setUserPassword, setShowHackMessage, password, timer]
);

return (
    <div className="App">
    <p>Login-Hacker</p>
    <input
        name={"email"}
        value={name}
        onChange={e => enterUserName(e.target.value)}
    />
    <br />
    <br />

    <input
        name={"password"}
        value={password}
        onChange={e => enterUserPassword(e.target.value)}
    />
    <p>Powered by Saurabh</p>
    {name.length > 0 && <p>Your name is {name}</p>}
    {password.length > 0 && <p>Your password is {password}</p>}
    {showHackMessage && <p className="awesome">Now you are hacked!</p>}
    </div>
);
}

export default App;

Answer 2

Используйте состояние для хранения переменной setInterval:

const [intervalIsSet, setIntervalIsSet] = useState(false);

Для установки:

         if (!intervalIsSet) {
            var interval = setInterval(someFunction, 10000);
            setIntervalIsSet(interval);
          }

Для очистки:

        if (intervalIsSet) {
            clearInterval(intervalIsSet);
            setIntervalIsSet(false);
        }