Форма Redux не инициализирована с чистым значением для поля - PullRequest
Новая
       15

Форма Redux не инициализирована с чистым значением для поля

4 голосов
/ 15 марта 2019

У меня есть массив со значениями периода, который выглядит следующим образом: 

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

Я строю излишнюю форму на основе выбранного периода из этого массива. Таким образом, пользователь может выбрать, какой период он хочет, и форма будет построена с начальными значениями из выбранного периода. Когда значения равны нулю, как показано выше, и я делаю некоторые изменения и сохраняю первый период с некоторыми значениями, форма перестраивается с новыми начальными значениями для второго периода. И начальные значения выглядят правильно: 

 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>

Почему, когда я проверяю правильные начальные значения состояния приращения и значение переключателя корректно отображается, но поле 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,
    }));

И в моем компоненте формы у меня нет локального состояния, я просто строю начальные значения с помощью prop selectedItemData: 

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