我在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
2条答案
按热度按时间s4n0splo1#
我发现了错误。错误在我的返回函数中。它只是将这个值返回给
usersAPI.getCSRF()函数，而不是全局onSubmit函数。我做了一些修改，所以我的最终代码看起来像这样：huwehgph2#
我花了2天在同一个问题（提交错误不显示），并希望张贴我的解决方案在这里的情况下，其他人遇到我的问题，因为我找不到它在网上。
基本上我有一个表单设置如下：
上面的问题是我直接调用了“onSubmit”函数，所以返回的提交错误不会出现。我需要调用传递到render函数的“handleSubmit”函数来填充错误，如下所示：