Блог

Главная - Вопросы по программированию - Недопустимая ошибка объекта в react при отправке формы

Недопустимая ошибка объекта в react при отправке формы

#javascript #reactjs #axios

Вопрос:

Я ввел какой-то специальный символ в поле пароля. И я получаю ошибку недопустимого объекта при отправке формы. Как я могу справиться с таким типом ошибки?

Рассмотрим этот код реакции:

 import React,{useState} from 'react'
import {useParams} from 'react-router-dom'
import axios from 'axios'

function ResetPassword(props) {

    const { id } = useParams()

    const [forgot,setForgot]=useState(
        {
            token:id?id:null,
            password:null,
            email:null
        }
        )
    const [error,setError]=useState('');
    console.log(forgot)

    const submitHandler=(e)=>{
        e.preventDefault()

            
        axios.post('/reset-password',forgot)
        .then(response=>{
            console.log(response)
            response.data.status? props.history.push('/login'):''
        })
        .catch(error=>{
            setError(error.response.data.msg)
        })
      
        // console.log(forgot);
    }



    return (
        <div class="container-md bg-light mt-5 p-5 col-lg-4">
            <form onSubmit={e=>submitHandler(e)}>
                <h1 class='mb-5 text-center'>Reset Password</h1>
                {error amp;amp; <p className="alert alert-danger">{error}</p>}
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Token</label>
                    <input type="text" value={forgot.token} class="form-control" id="exampleInputPassword1" 
                    onChange={e=>setForgot({...forgot,token:e.target.value,})}
                    required />
                </div>
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Email</label>
                    <input type="email" class="form-control" id="exampleInputPassword1" 
                    onChange={e=>setForgot({...forgot,email:e.target.value,})}
                    required />
                </div>
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">New Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" 
                    onChange={e=>setForgot({...forgot,password:escape(e.target.value)})}
                    required />
                </div>
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Confirm Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" 
                    onChange={e=>setForgot({...forgot,password_confirmation:escape(e.target.value)})}
                    required />
                </div>
                <div className="d-flex flex-column">
                    <button type="submit" class="btn btn-success flex-grow-1">Update</button>
                </div>
            </form>
        </div>
    )
}

export default ResetPassword

В случае нормального значения в поле пароля проблем не возникает, но когда я пытаюсь ввести специальный символ, он выдает ошибку недопустимого объекта.

Попытка ввести значение пароля этого типа:

 {token: "54550", password: "/85236", email: "a@b", password_confirmation: "*96325"}

Комментарии:

1. Можете ли вы показать консоль. журнал error.response.data.msg регистрации ?

2. Где вы визуализируете какой-либо объект со свойством пароля, ошибка? Пожалуйста, поделитесь, какова ценность error.response.data.msg того, что вы устанавливаете в состоянии и рендеринге.

3. @Вьетнам { "password": [ "The password must be at least 6 characters.", "The password confirmation does not match." ] }

4. @Дрю Риз @Консоль Viet. вывод журнала { "password": [ "The password must be at least 6 characters.", "The password confirmation does not match." ] } теперь здесь, ошибка устранена для меня, спасибо вам обоим, ребята

Ответ №1:

Вы можете выбрать сохранение первой ошибки в состояние и визуализацию, но в подобных случаях с несколькими невыполненными требованиями к паролям вам может потребоваться фактически отобразить все ошибки в списке.

 {error amp;amp; [error].flatMap(err => (
  <p key={err} className="alert alert-danger">{error}</p>
))}

Как это работает:

 [error].flatMap()

Если ошибка представляет собой строковое значение, оно будет помещено в массив и сопоставлено. Если ошибка представляет собой массив строк, он будет сглажен как массив строк (не массив массива строк) и сопоставлен.

 const mapErrors = arg => [arg].flatMap(el => el).join(', ');

console.log(mapErrors('error'));
console.log(mapErrors(['error 1', 'error 2', 'error 3']));

Ответ №2:

Потому error.response.data.msg что возвращайте объект , чтобы при использовании {error amp;amp; <p className="alert alert-danger">{error}</p>} он показывал эту ошибку.

Вам нужно обязательно передать строковое значение при вызове setError , например:

 setError(error.response.data.msg?.password[0])
Метки: