React useActionState重置表单
Back to blog
React

React useActionState重置表单

useActionState副作用之清除表单内容

做了个简单的loginForm，使用useActionState做服务器验证，结果用户如果输入错误，或者验证不通过，账号密码就会自动清空！这真是意想不到，为什么要有这样的副作用！？
现在临时的解决办法就是，Server action那里，如果遇到错误就把表单的数据给return了，这样useActionState里的state就会接收到这个值，然后填写到表单里的defaultValue
'use server'  

export async function login(prevState: unknown, formData: FormData): {  
  const email = formData.get('email')?.toString() || ''  
  const password = formData.get('password')?.toString() || ''  

  try {  
    await authenticateUser({ email, password })  
    return { success: true }  
  } catch (error) {  
    // 把用户输入数据塞回前端  
    return {  
      error: '验证失败',  
      email,       // 传回邮箱  
      password     // 传回密码（⚠️ 安全提示：实际项目建议不返回密码）  
    }  
  }  
}  
'use client'  
export function LoginForm() {  
  const [state, action] = useActionState(login, { email: '', password: '' })  

  return (  
    <form action={action}>  
      <input  
        name="email"  
        key={state?.email} // 强制重新挂载  
        defaultValue={state?.email}  
      />  
      <input  
        name="password"  
        type="password"  
        key={state?.password}  
        defaultValue={state?.password}  
      />  
    </form>  
  )  
}