React中如何实现用户跳转页面返回后清空登录表单errMsg错误提示

解决方案 #

你遇到的问题本质是useEffect的依赖项设置错误，或者没有匹配页面的生命周期场景，分两种常见场景处理即可：

场景1：登录页无缓存，跳转时组件会被销毁 #

这时候直接使用空依赖的useEffect即可，空依赖的useEffect只会在组件首次挂载完成后执行1次，后续errMsg更新触发的重渲染不会再触发这个effect，完全不会影响错误信息的正常展示。
你之前遇到的直接清空的问题，大概率是把errMsg加到了useEffect的依赖数组里，导致每次errMsg变化都会触发effect执行重置，去掉这个依赖即可。
代码示例：

import { useState, useEffect } from 'react'

function LoginPage() {
  const [errMsg, setErrMsg] = useState('')

  // 空依赖，仅组件挂载时执行，重置错误信息
  useEffect(() => {
    setErrMsg('')
  }, [])

  // 登录逻辑示例
  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      // 调用登录接口逻辑
    } catch (err) {
      setErrMsg('用户名或密码错误')
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <p>Username</p>
        <input type="text" />
      </label>
      <label>
        <p>Password</p>
        <input type="password" />
      </label>
      <div>
        <button type="submit">Submit</button>
      </div>
      <div>
        <span>{errMsg}</span>
      </div>
    </form>
  )
}

场景2：登录页做了缓存，跳转时组件不会被销毁 #

如果你的项目配置了路由缓存（比如使用react-router配合缓存组件、或者移动端单页应用的保活逻辑），跳转后登录页组件不会卸载，只会切到后台，这时候可以监听路由的激活事件/路径变化来重置错误信息，以react-router v6为例：

import { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'

function LoginPage() {
  const [errMsg, setErrMsg] = useState('')
  const location = useLocation()

  useEffect(() => {
    // 只有当前路径是登录页路径时，才重置错误信息
    if (location.pathname === '/login') {
      setErrMsg('')
    }
  }, [location.pathname])

  // 其余逻辑和上面一致
}

如果使用其他路由方案，也可以监听对应路由的「进入当前页」事件来触发setErrMsg('')即可。

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