基于API响应更新特定组件上的道具

Question

我有一个API，它带有一个对象，并将与每个inputField相关的错误封装在其中，例如：

{
"success": false,
"message": "The given data was invalid.",
"errors": {
"firstname": [
"Invalid firstname", 
"Firstname must be at least 2 characters long"
], 
"companyname": ["company name is a required field"]
}
}

根据错误，我需要在输入元素的正下方显示错误，其代码如下所示：

class RegistrationComponent extends  Component {
onSubmit = (formProps) => {
this.props.signup(formProps, () => {
this.props.history.push('/signup/complete');
});
};
render() {
const {handleSubmit} = this.props;
return (
<div>
<form
className='form-signup'
onSubmit={handleSubmit(this.onSubmit)}
>
<Field name='companyname' type='text' component={inputField} className='form-control' validate={validation.required} />
<Field name='firstname' type='text' component={inputField} className='form-control' validate={validation.required} />
<Translate
content='button.register'
className='btn btn-primary btn-form'
type='submit'
component='button'
/>
</form>
</div>
);}}

inputField:

export const inputField = ({
input,
label,
type,
className,
id,
placeholder,
meta: { error, touched },
disabled
}) => {
return (
<div>
{label ? (
<label>
<strong>{label}</strong>
</label>
) : null}
<Translate
{...input}
type={type}
color={"white"}
className={className}
id={id}
disabled={disabled}
component="input"
attributes={{ placeholder: placeholder }}
/>
<InputFieldError
touched={touched}
error={<Translate content={error} />}
/>
</div>
);
};

最后；

import React, { Component } from "react";
class InputFieldError extends Component {
render() {
return <font color="red">{this.props.touched && this.props.error}</font>;
}
}
export default InputFieldError;

如果我简单地使用validate={validation.required}进行验证，则错误属性会附加到正确的输入字段，并且我可以使用其正下方的InputFieldError来呈现错误div。

我正在将API响应中的所有错误映射回类似这样的道具：

function mapStateToProps(state) {
return { errorMessage: state.errors, countries: state.countries };
}

这意味着我可以打印我在任何地方遇到的每一个错误，比如：

{this.props.errorMessage
? displayServerErrors(this.props.errorMessage)
: null}

通过简单地遍历errorMessage上的每个属性，在同一个位置呈现所有内容很容易。

现在，当我试图从API分配回错误时("errors": {"firstname": []}与Field name="firstname"链接等等…(；名字"；属性设置为Field name="firstname"中正确的InputFieldError组件

我希望这个问题足够清楚，为了总结，我试图将我从API得到的错误呈现给他们各自的输入元素。

Answer 1

尝试将errors.firstname传递给像这样的字段内部组件

<Field name='companyname' type='text' component={<inputField apiErrors={this.props.errorMessage.errors.firstname || null} {...props}/>} className='form-control' validate={validation.required} />

然后你的inputField将是：

export const inputField = ({
input,
label,
type,
className,
id,
placeholder,
meta: { error, touched },
apiErrors,
disabled
}) => {
return (
<div>
{label ? (
<label>
<strong>{label}</strong>
</label>
) : null}
<Translate
{...input}
type={type}
color={"white"}
className={className}
id={id}
disabled={disabled}
component="input"
attributes={{ placeholder: placeholder }}
/>
<InputFieldError
touched={touched}
error={apiErrors ? apiErrors : <Translate content={error} />}
/>
</div>
);
};

和：

class InputFieldError extends Component {
render() {
const errors = this.props.error
let errorContent;
if (Array.isArray(errors)) {
errorContent = '<ul>'
errors.map(error, idx => errorContent+= <li key={idx}><Translate content={error}/></li>)
errorContent += '</ul>'
} else {
errorContent = errors
}
return <font color="red">{this.props.touched && errorContent}</font>;
}
}

您也可以在表单的顶部添加主要错误

class RegistrationComponent extends  Component {
onSubmit = (formProps) => {
this.props.signup(formProps, () => {
this.props.history.push('/signup/complete');
});
};
render() {
const {handleSubmit} = this.props;
return (
<div>
{this.props.errorMessage.message && 
<Alert>
<Translate content={this.props.errorMessage.message}/>
</Alert>
}
<form
className='form-signup'
onSubmit={handleSubmit(this.onSubmit)}
>
...