反应钩子函数组件中的设置超时未清除

Question

我试图在 react 的函数组件中实现简单的更新，但似乎在我这边偶然发现了一些基本的逻辑错误。 你能帮我吗？

我的代码：

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. 为什么在 settimeout 中定义 setstate 函数时必须使用回调？ 我试过

   超时= setTimeout(setShowHackMessage(true), 1000); 它没有用，而

   timeout= setTimeout(()=>setShowHackMessage(true), 1000); 完美地工作。 setShowHackMessage（在 useState 中不是函数？）

2. 如果我在函数内部定义变量 var timeout，则 cleartimeout 不起作用（在控制台中显示为未定义），但如果我在函数外部定义它，就像在代码中一样，它可以完美工作。 整个函数是否在 setstate 之后“呈现”（因此丢失了变量超时的前一个实例？）。我应该为此使用 refs 吗？

   谢谢你。

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;