react-hook-form 핸들의 서버측 오류 처리Submit

react-hook-form 핸들의 서버측 오류 처리Submit

단일 입력 필드와 관련이 없는 오류를 처리하는 방법을 찾는 데 어려움을 겪고 있습니다.react-hook-form다르게 말하면, 어떻게 해야 할까요?handleSubmit오류?

예를 들어 다음과 같은 형식이 있습니다.

import to from 'await-to-js'
import axios, { AxiosResponse } from 'axios'
import React from "react"
import { useForm } from "react-hook-form"

type LoginFormData = {
  username: string,
  password: string,
}

export const Login: React.FC = () => {
  const { register, handleSubmit } = useForm<LoginFormData>()

  const onSubmit = handleSubmit(async (data) => {
    const url = '/auth/local'

    const [err, userLoginResult] = await to<AxiosResponse>(axios.post(url, data))
    if (userLoginResult) {
      alert('Login successful')
    }
    else if (err) {
      alert('Bad username or password')
    }
  })

  return (
    <div className="RegisterOrLogIn">
      <form onSubmit={onSubmit}>
        <div>
          <label htmlFor="username">username</label>
          <input name="username" id="username" ref={register} />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input type="password" id="password" name="password" ref={register} />
        </div>
        <button type="submit"> </button>
      </form>
    </div>
  )
}

사용자 이름 또는 암호에 오류가 있음을 사용자에게 알리는 방법이 있습니까?alert()

아마도 이것은 다른 곳에서 답변을 받은 것 같은데, 저는 찾을 수 없었습니다.

---

정리 서버에서 수신된 오류는 단일 필드와 관련이 없습니다.

{
    "statusCode": 400,
    "error": "Bad Request",
    "message": [
        {
            "messages": [
                {
                    "id": "Auth.form.error.invalid",
                    "message": "Identifier or password invalid."
                }
            ]
        }
    ],
    "data": [
        {
            "messages": [
                {
                    "id": "Auth.form.error.invalid",
                    "message": "Identifier or password invalid."
                }
            ]
        }
    ]
}

서버의 오류를 사용자에게 표시하려면 다음을 사용해야 합니다.

• setError 서버가 오류 응답을 반환할 때 오류를 프로그래밍 방식으로 설정합니다.
• errors 사용자에게 표시할 양식의 모든 필드의 오류 상태를 가져옵니다.

type FormInputs = {
  username: string;
};

const { setError, formState: { errors } } = useForm<FormInputs>();

당신의handleSubmit콜백

axios
  .post(url, data)
  .then((response) => {
    alert("Login successful");
  })
  .catch((e) => {
    const errors = e.response.data;

    if (errors.username) {
      setError('username', {
        type: "server",
        message: 'Something went wrong with username',
      });
    }
    if (errors.password) {
      setError('password', {
        type: "server",
        message: 'Something went wrong with password',
      });
    }
  });

사용자 구성 요소

<label htmlFor="username">username</label>
<input id="username" {...register("username")} />
<div>{errors.username && errors.username.message}</div>

라이브 데모

@Near Huscarl의 답변에 영감을 받아, 저는 다음과 같은 해킹.t. 변경을 했습니다.username또는password입력은 단일 오류를 제거합니다.

오류가 양식의 여러 필드와 관련된 경우 이 해킹은 제대로 확장되지 않지만 로그인 사용 사례에서는 효과가 있었습니다.

제출 시:

const onSubmit = handleSubmit(async (data) => {
    const url = '/auth/local'

    const [err, userLoginResult] = await to<AxiosResponse>(axios.post(url, data)) // see await-to-js 
    if (userLoginResult) {
      alert('Login successful')
    }
    else if (err) {
      const formError = { type: "server", message: "Username or Password Incorrect" }
      // set same error in both:
      setError('password', formError)
      setError('username', formError)
    }
  })

구성 요소:

  return (
    <div className="RegisterOrLogIn">
      <form onSubmit={onSubmit}>
        <div>
          <label htmlFor="username">username</label>
          <input name="username" id="username" ref={register} />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input type="password" id="password" name="password" ref={register} />
        </div>
        <div>{errors.username && errors.password?.message /*note the cross check*/}</div>
        <button type="submit"> </button>
      </form>
    </div>
  )

둘 다에 오류를 설정하고 렌더링함으로써errors.password&errors.username사용자가 이러한 필드 중 하나를 업데이트하면 오류가 사라집니다.

언급URL : https://stackoverflow.com/questions/64469861/react-hook-form-handling-server-side-errors-in-handlesubmit