У меня есть Redux Form и компонент(Пусть назовем его Registry) , в который через props прокидываются данные с полей, в данном компоненте я произвожу такую вот мутацию
const query = gql`mutation MUatation($email: String!, $password: String!){
register(email: $email, password: $password, expiresIn: "24h") {
token
}
}`;
и получается, что каждый раз, как я ввожу новый символ в поле у меня, обновляется хранилище, а значит обновляются props, и следовательно происходит запрос. Как исправить данное положение?
Компонент, в котором рендерится форма и передаются props
class App extends Component {
render() {
return(
<div>
<Auth/>
{(/*this.props.formData.fields.email.visited &&*/ this.props.formData.values.email !== '') &&
(/*this.props.formData.fields.password.visited && */this.props.formData.values.password !== '')?
<Main
email={this.props.formData.values.email}
password={this.props.formData.values.password}
onSubmit={this.handleSubmit}
/>: null }
</div>
)
}
}
App.defaultProps = {
formData: {
values: {
email: '',
password: ''
}
}
};
export default connect(state => {
return{
formData: state.form.AuthForm
}})(App)
Redux Form:
const renderField = ({ input, label, type, meta: { touched, error, warning }}) => (
<div>
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type} style={touched? error? {borderColor: 'red'}: {borderColor:''}: {borderColor:''}} />
</div>
</div>
);
const Auth = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<div>
<div>
<Field
name="email"
component={renderField}
type="email"
placeholder="Email"
/>
</div>
</div>
<div>
<div>
<Field
name="password"
component={renderField}
type="password"
placeholder="Password"
/>
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
)
}
export default reduxForm({
form: 'AuthForm',
initialValues: {
password: '',
email: '',
},
validate
})(Auth)