我正在从服务器端验证表单收到错误消息后,我希望在相应文本框字段错误消息中显示错误消息
客户端对象
const formFields = {
firstName: {
helperText: '',
error: false
},
lastName: {
helperText: '',
error: false
},
emailID: {
helperText: '',
error: false
},
phoneNo: {
helperText: '',
error: false
},
password: {
helperText: '',
error: false
},
confirmPassword: {
helperText: '',
error: false
}
}
验证后的服务器端响应对象
const responseError = errorData.response.data.errors //below object is the response
//{
//"LastName": ["Enter LastName"],
//"FirstName": ["Enter FirstName"],
//"ConfirmPassword": ["Enter Confirm Password","confirm password do not match"]
//}
使用状态
const [inpValues, setInpValues] = useState(formFields)
更新条件
如果客户端对象关键字===响应对象关键字,则设置错误和帮助器文本字段输入值
const responseError = errorData.response.data.errors
console.log(responseError)
var FormFieldName = ""
for (keys in formFields) {
console.log('FormField keys = ' + keys)
for (var errorKeys in responseError) {
if (keys.toLowerCase() === errorKeys.toLowerCase()) {
console.log('* MATCHED FIELDS = ' + errorKeys)
//Matched 3 fields(LastName,FirstName,ConfirmPassword) successfully
FormFieldName = keys
setInpValues(prevInpValues => ({
...prevInpValues,
[FormFieldName]: {
...prevInpValues[FormFieldName],
error: true,
helperText: responseError[errorKeys]
}
})
)
console.table(inpValues)
}
}
}
备注
我已经通过了这个stack overflow,然后我也传递了previousState值。结果还是一样。
它只更新最后一个for循环条件值
如果response.error对象只返回了一个字段,那么它将更新该字段
1条答案
按热度按时间lp0sw83n1#
为了避免不必要的额外渲染,您应该在setState回调内执行以下操作: