Redux 表单卸载组件 onSubmit

Question

所以我现在有一个表格，我想更新名字和姓氏。如果出现错误，我想捕获并显示它。问题是我收到错误，ReduxForm Can only update a mounted or mounting component, if I get an error。原因是 redux-form 正在卸载和重新安装我的组件。有没有办法避免重新挂载组件？

  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));

Answer 1

我认为你应该使用 onSubmitFail and onSubmitSuccess 来处理 onSubmit 回调

Redux 表单卸载组件 onSubmit

Redux form unmounting component onSubmit

javascript

reactjs

redux

redux-form

react-redux