Question

我有一个带有周期值的数组，如下所示：

[
  {
    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状态初始值正确并且单选按钮值正确呈现，但是description字段是使用上一个周期的值呈现的？用户可以通过在时间轴上选择一个表单来选择他想要的表单。如果我在第一个期间进行更改，则会自动为他选择第二个期间，然后会发生此错误。如果我再次在时间轴上手动选择了时间段，那么description字段在第二个时间段中将不会显示任何内容，如推测的那样。这是我用于保存每个期间的数据的功能，此后，我自动移至下一个导致错误的期间。

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

我不确定为什么用上一个期间的值来渲染此description字段？

我想知道这是否与我如何构建此组件有关。在我的父组件中，我正在发送道具数据以形成这样的组件：

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

在我的表单组件中，我没有任何本地状态，我只是使用道具selectedItemData构建初始值：

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

Redux表单未使用字段的纯净值初始化

0 个答案: