CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxredux-form
TaylorRayHoward
TaylorRayHoward

Reputation: 90

Redux form unmounting component onSubmit

So what I have right now is a form and I want to update the first and last name. If there's an error I want to catch and display it. The problem is I get the error, ReduxForm Can only update a mounted or mounting component, if I get an error. The reason is that redux-form is unmounting and remounting my component. Is there a way to avoid the remounting of the component?

  class EditUser extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
    this.state = {};
  }

  onSubmit(values) {
    const { fname, lname } = values;
    return this.props.editUser(fname, lname).catch(err => this.setState({ 
      error: err
    });
  }

  render() {
    const { handleSubmit, submitting } = this.props;
    return (
      <Container>
        <Row>
          <Col sm={{ size: 8, offset: 2 }}>
            <div>
              <form onSubmit={handleSubmit(this.onSubmit)}>
                <FormGroup>
                  <Field
                    label="First Name"
                    type="input"
                    name="fname"
                    id="fname"
                    component={FieldInput}
                    placeholder="First Name"
                    validate={required}
                  />
                </FormGroup>
                <FormGroup>
                  <Field
                    label="Last Name"
                    type="input"
                    name="lname"
                    id="lname"
                    component={FieldInput}
                    placeholder="Last Name"
                    validate={required}
                  />
                </FormGroup>
                <Button color="success" className="float-right" disabled={submitting}>Submit</Button>
              </form>
            </div>
          </Col>
        </Row>
      </Container>
    );
  }
}

function mapStateToProps(state) {
  const { first_name, last_name } = state.user;
  return {
    user: state.user,
    initialValues: {
      fname: first_name,
      lname: last_name
    }
  };
}

export default connect(mapStateToProps, { editUser })(reduxForm({
  form: 'EditUserForm',
})(EditUser));

Upvotes: 0

Views: 1212

Answers (1)

h1b9b
h1b9b

Reputation: 1050

I think that you should use onSubmitFail and onSubmitSuccess to handle onSubmit callbacks

Upvotes: 1

Related Questions