代码之家 › 专栏 › 技术社区 › Leff

未使用字段的干净值初始化Redux窗体

redux-form reactjs

Leff · 技术社区 · 6 年前

我有一个数组,其句点值如下所示:

[
  {
    id: 1,
    description: null,
    outdated: null,
  },
  { 
    id: 2,
    description: null,
    outdated: null,
   },
]

我正在基于从这个数组中选择的句点构建一个redux表单。因此,用户可以选择他想要的时段,表单将使用所选时段的初始值生成。当值为空时(如上图所示),我进行一些更改并用一些值保存第一个句点,表单将用第二个句点的新初始值进行重建。初始值看起来是正确的:

 initial: { 
    id: 2,
    description: null,
    outdated: null,
   },

但是,在形式上,这个领域 description 使用第一个时段的值呈现。这是表格:

    <Row>
      <Column md="6">
        <TextAreaField
          name="description"
          maxLength={1500}
          readOnly={readOnly}
          id="outdatedDescription"
        />
      </Column>
      <Column md="6">
        <Undertext><FormattedMessage id="RadioGroup.Outdated" /></Undertext>
        <VerticalSpacer eightPx />
        <RadioGroupField
          validate={[required]}
          name="outdated"
          direction="vertical"
          readOnly={readOnly}
          onChange={this.resetFields}
        >
          <RadioOption
            label={<FormattedMessage id="RadioOption.Outdated" />}
            value={outdatedCodes.YES}
          />
          <RadioOption
            label={<FormattedMessage id="RadioOption.NotOutdated" />}
            value={outdatedCodes.NO}
          />
        </RadioGroupField>
      </Column>
    </Row>
    <VerticalSpacer twentyPx />
    <FlexRow>
      <FlexColumn>
        <MainButton
          mini
          htmlType="button"
          onClick={formProps.handleSubmit}
          disabled={formProps.pristine}
        >
          <FormattedMessage id="Update" />
        </MainButton>
      </FlexColumn>
    </FlexRow>

为什么当我检查redux状态时,初始值是正确的,单选按钮的值是正确的,但是 描述 字段是用以前期间的值呈现的? 用户可以通过在时间线上选择其中一个来选择他想要表单的时间段。如果我在第一个时段做了更改,则会自动为他选择第二个时段,然后发生此错误。如果我在时间线上再次手动选择时间段,则 描述 字段在第二个周期中不显示任何内容,就像它应该显示的那样。这是我用来保存每个时段数据的函数,之后我会自动移动到下一个导致错误的时段。

updateActivity(values) {
    const { periods } = this.props;

    const otherThanUpdated = periods .filter(o => o.id !== values.id);
this.setSelectedPeriod(otherThanUpdated || undefined);
  }

这是当用户在时间线上手动选择期间时的选择处理程序:

selectHandler(eventProps) {
    const { periods } = this.props;
    const { selectedItem: currentSelectedItem } = this.state;
    const selectedItem = periods.find(item => item.id === eventProps.items[0]);
    if (currentSelectedItem) {
      this.setState({ selectedItem: undefined });
      this.setSelectedPeriod(selectedItem);
    } else {
      this.setSelectedPeriod(selectedItem);
    }
    eventProps.event.preventDefault();
  }

我已将窗体配置为启用重新初始化:

enableReinitialize: true

我不知道这是为什么 描述 使用以前期间的值呈现的字段?

我想知道这是否与我如何构建这个组件有关。在父组件中,我将向窗体组件发送道具数据,如下所示:

const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, {
      selectedItemData: selectedItem,
      cancelSelectedActivity: this.cancelSelectedActivity,
      updateActivity: this.updateActivity,
    }));

在我的表单组件中,我没有任何本地状态,我只是用prop构建初始值 selectedItemData :

const buildInitalValues = selectedItemData => ({ ...selectedItemData });
const mapStateToProps = (state, initialProps) => ({
  initialValues: buildInitalValues(initialProps.selectedItemData),
  onSubmit: values => initialProps.updateActivity(transformValues(initialProps.selectedItemData, values)),
});

0 回复 | 直到 6 年前