У меня проблемы с библиотекой React-Final-Form. Из функции onSubmit
я возвращаю ошибку проверки, но она не отображается в самой форме. Здесь вы можете увидеть мой код:
Моя форма:
<Form
onSubmit={this.onSubmit}
initialValues={{}}
validate={
values => {
const errors = {}
if (!values.username) {
errors.username = "This field is required"
}
if (!values.password) {
errors.password = "This field is required"
}
return errors
}
}
render={({submitError, handleSubmit, submitting, values}) => (
<form onSubmit={handleSubmit}>
<div className="form-group">
<label>First Name</label>
<Field name="username">
{({input, meta}) => (
<>
<input {...input} type="text" placeholder="Username"
className={"form-control" + ((meta.error || meta.submitError) && meta.touched ? " is-invalid" : "")}/>
{(meta.error || meta.submitError) && meta.touched ?
<div
className="invalid-feedback">{meta.error || meta.submitError}</div> : null
}
</>
)}
</Field>
{submitError && (
<div>{submitError}</div>
)}
</div>
<div className="form-group">
<label>Password</label>
<Field name="password">
{({input, meta}) => (
<>
<input {...input} type="password"
placeholder="Password"
className={"form-control" + ((meta.error || meta.submitError) && meta.touched ? " is-invalid" : "")}/>
{(meta.error || meta.submitError) && meta.touched ?
<div
className="invalid-feedback">{meta.error || meta.submitError}</div> : null
}
</>
)}
</Field>
</div>
<button type="submit" disabled={submitting}
className="btn btn-block btn-outline-secondary">Log In
</button>
<pre>{JSON.stringify(values, 0, 2)}</pre>
</form>
)}
/>
Моя функция onSubmit:
onSubmit = async values => {
const errors = {}
let loginData = {
username: values.username,
password: values.password
}
usersAPI.getCSRF().then((response) => {
usersAPI.login(loginData)
.then(response => {
if (response.data.login_status === "Incorrect data") {
console.log("Invalid data")
errors.username = "Invalid login or password"
errors.password = "Invalid login or password"
return errors
} else {
localStorage.setItem('token', response.data.token)
this.props.setAuthState(true)
console.log("Logged in successfully")
}
})
.catch(err => console.log(err))
})
}
Проблема в запросе axios. Если мой внутренний сервер отправит ответ, что учетные данные недействительны, тогда console.log("Invalid data")
появится в консоли, но с формой ничего не произойдет. Если я прокомментирую свой запрос axios и просто оставлю этот код:
onSubmit = async values => {
return {username: "Invalid data"}
}
Итак, в этом случае все работает правильно. Кто может сказать мне, как я могу оптимизировать мой запрос axios, чтобы после этого моя форма получала ошибки отправки, которые возвращались из
errors.username = "Invalid login or password"
errors.password = "Invalid login or password"
return errors
async
. - person Levi Fuller   schedule 14.07.2021