Question

我有以下redux-form组件，我想使用isSubmitting选择器来禁用提交按钮。但是，当表单提交

时，它永远不会返回true

我的mapStateToProps功能：

const mapStateToProps = (state, props) => {
  const firstTemplate = _.first(props.templates.toList().toJS());
  const course = props.courses.getIn([0, 'id']);
  let values = { submitting: isSubmitting('CreateNewAssignmentForm')(state) };
  if (firstTemplate === undefined) {
    return values;
  }

  if (firstTemplate) {
    values = {
      course,
      template: firstTemplate,
      submitting: isSubmitting('CreateNewAssignmentForm')(state),
      initialValues: {
        template: firstTemplate.id,
        wordCount: firstTemplate.essay_wordcount,
        timezone: momentTimezone.tz.guess(),
        label: 'TRANSPARENT',
      },
    };
  }

  return values;
};

export default connect(mapStateToProps)(
  reduxForm({
    form: 'CreateNewAssignmentForm',
    destroyOnUnmount: false,
    shouldAsyncValidate,
    shouldValidate,
  })(CreateNewAssignmentForm),
);

我的render()功能的部分摘录：

  render() {
    const { handleSubmit, templates, courses, submitting } = this.props;

    return (
      <StandardModalComponent
        id="AssignmentModal"
        title="Create Essay Draft"
        primaryAction={['Submit', handleSubmit, { disabled: submitting }]}
        width={800}
      >

我正确使用选择器吗？

Answer 1

绝对不需要将isSubmitting选择器与reduxForm hoc一起使用。 reduxForm hoc将传递submitting道具，可用于检查表单是否正在提交。但是redux-form需要知道它何时提交。如果您的onSubmit返回的值不是Promise，则submitting道具将始终为false，redux-form根本无法判断提交何时完成，但是onSubmit 1}}确实返回一个承诺（如@Sreeragh AR建议）然后它会将submitting道具设置为真，直到承诺得到解决或拒绝。

也就是说，还有其他需要注意的事项：您在isSubmitting内使用了mapStateToProps选择器创建者，这真的很糟糕。这将为每个重新渲染器创建一个选择器。这样做的正确方法是使用createMapStateToProps函数。

const createMapStateToProps = ()=> {
  const isSubmittingSelector = isSubmitting('CreateNewAssignmentForm');

  return (state, props) => {
    const firstTemplate = _.first(props.templates.toList().toJS());
    const course = props.courses.getIn([0, 'id']);
    let values = { submitting: isSubmittingSelector(state) };
    if (firstTemplate === undefined) {
      return values;
    }

    if (firstTemplate) {
      values = {
        course,
        template: firstTemplate,
        submitting: isSubmittingSelector(state),
        initialValues: {
          template: firstTemplate.id,
          wordCount: firstTemplate.essay_wordcount,
          timezone: momentTimezone.tz.guess(),
          label: 'TRANSPARENT',
        },
      };
    }

    return values;
  }   
}

 export default connect(createMapStateToProps())(
  reduxForm({
    form: 'CreateNewAssignmentForm',
    destroyOnUnmount: false,
    shouldAsyncValidate,
    shouldValidate,
  })(CreateNewAssignmentForm),
);

redux-form试图使用isSubmitting selector

1 个答案: