React注册表单：如何延长重复账号错误提示的显示时长？

你不需要用setTimeout来控制错误提示时长，因为你的需求是让错误提示保持到用户和表单交互为止，直接监听表单输入控件的交互事件来清除错误提示即可，具体步骤如下：

1. 移除无效的setTimeout逻辑 #

先把之前添加的定时器代码删掉，改用交互触发的方式清除错误：

await axios
  .post("http://localhost:5000/user/register", {
    name: user,
    email: email,
    password: pwd,
  })
  .then((res) => {
    console.log(res);
    if (res.data) {
      setErrMsg("Username or Email Taken");
    } else {
      setSuccess(true);
    }
  })
  // 建议加上请求错误捕获，避免网络问题导致无提示
  .catch(() => {
    setErrMsg("Registration failed, please try again");
  });

2. 给表单输入控件添加交互清除错误的逻辑 #

给每个输入框（用户名、邮箱、密码）添加onChange和onFocus事件，当用户开始输入或者聚焦输入框时，自动清除错误提示。

方式1：直接在事件中处理 #

{/* 用户名输入框示例 */}
<input
  type="text"
  value={user}
  onChange={(e) => {
    setUser(e.target.value);
    // 输入时清除错误
    if (errMsg) setErrMsg("");
  }}
  onFocus={() => {
    // 聚焦时清除错误
    if (errMsg) setErrMsg("");
  }}
  placeholder="Username"
/>

{/* 邮箱输入框同理 */}
<input
  type="email"
  value={email}
  onChange={(e) => {
    setEmail(e.target.value);
    if (errMsg) setErrMsg("");
  }}
  onFocus={() => {
    if (errMsg) setErrMsg("");
  }}
  placeholder="Email"
/>

{/* 密码输入框同理 */}
<input
  type="password"
  value={pwd}
  onChange={(e) => {
    setPwd(e.target.value);
    if (errMsg) setErrMsg("");
  }}
  onFocus={() => {
    if (errMsg) setErrMsg("");
  }}
  placeholder="Password"
/>

方式2：封装通用清除函数（更简洁） #

如果不想重复写清除逻辑，可以封装一个通用函数：

const clearError = () => {
  if (errMsg) setErrMsg("");
};

然后在输入框中复用：

<input
  type="text"
  value={user}
  onChange={(e) => {
    setUser(e.target.value);
    clearError();
  }}
  onFocus={clearError}
  placeholder="Username"
/>

<input
  type="email"
  value={email}
  onChange={(e) => {
    setEmail(e.target.value);
    clearError();
  }}
  onFocus={clearError}
  placeholder="Email"
/>

<input
  type="password"
  value={pwd}
  onChange={(e) => {
    setPwd(e.target.value);
    clearError();
  }}
  onFocus={clearError}
  placeholder="Password"
/>

为什么之前的setTimeout无效？ #

通常是因为React组件在更新状态（比如设置errMsg）后会重新渲染，之前创建的定时器可能被销毁或者上下文丢失，导致无法正确触发。而且定时器的方式也不符合你“直到用户交互才消失”的需求，所以用交互事件触发清除才是更贴合场景的方案。

内容的提问来源于stack exchange，提问作者Crossplayz Rapsta