Почему redux-form не корректно работает при наличии initialValues?

Question

[Artem Maximum]

Существует redux-form форма инициализированная в контейнере:

ProgramsCreateContainer = reduxForm({
  form: 'update-programs',
  enableReinitialize: true,
  keepDirtyOnReinitialize: true,
  onSubmit,
  validate,
})(ProgramsCreateContainer)

function select(state) {
  const selector = formValueSelector('update-programs')

  return {
    initialValues: state.programs.program,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    receiveProgram: bindActionCreators(receiveProgram, dispatch),
    saveEventId: bindActionCreators(saveEventId, dispatch),
  }
}

ProgramsCreateContainer = connect(select, mapDispatchToProps)(ProgramsCreateContainer)

export default ProgramsCreateContainer

внутри формы используется компонент:
form:

<div className="robofinist__h-table-item">
            <h3 className="robofinist__h-table-item-name">Описание</h3>
            <p className="robofinist__h-table-item-value" style={{ minHeight: '260px' }}>
              <RFCKEditorField name="description" />
            </p>
          </div>

RFCKEditorField комонент:

import React, { Component } from 'react'
import { Field } from 'redux-form'
import { WYSIWYGEditor } from '../../ui/molecules'

export class RFCKEditorField extends Component {
  constructor(props) {
    super(props)

    this.generateCKEditorField = this.generateCKEditorField.bind(this)
  }

  generateCKEditorField({ input, ...field }) {
    return (
      <div>
        <WYSIWYGEditor {...input} />
        {field.touched && field.error && <span className="error">{field.error}</span>}
      </div>
    )
  }

  render() {
    return (
      <Field {...this.props} component={(field, meta) => this.generateCKEditorField(field, meta)} />
    )
  }
}

RFCKEditorField.defaultProps = {};

RFCKEditorField.propTypes = {
  onChange: React.PropTypes.func.isRequired,
}

Вопрос в том, почему, когда существует параметр initialValues в контейнере, следующий компонент:

<Field {...this.props} component={(field, meta) => this.generateCKEditorField(field, meta)} />

начинает вызывать функцию this.generateCKEditorField(field, meta) каждый раз, когда пользователь изменяет какое либо поле (любое) в существующей форме.

Как решение, я изменил компонент следующим образом:

render() {
    return (
      <Field {...this.props} component={this.generateCKEditorField} />
    )
  }

другими словами, теперь компонент генерирует вложенный компонент и передает туда значения из redux-field компонента, только единожды и уже не пересоздается при попытке ввода данных в другие поля.

Однако моя задача требует программного заполнения полей, при вызове определенной функции в компоненте формы:

autofill('description', selectedCompetition.content)

Вот в этом случае, Field компонент перерисовывается, однако он не вызывает функцию this.generateCKEditorField заного для вставки новых данных.

Данное неверное поведение происходит только лишь при наличии initialValues в контейнере (в котором создается форма). Если убрать этот параметр то все работает как нужно перерисовка не происходит при заполнении любого поля и происходит при программном обновлении значения полей.

Моя задача в том, чтобы либо понять и исправить причину некорректности работы redux-form
либо сделать так, чтобы при программном заполнении полей через функцию autofill(fieldName, newValue)
Field компонент всё же вызывал перерисовку сгенерированный им же компонент.

Comments

[Dmitriy Uvarov]

Можно немного подробней о некорректно, логи или хотя бы ожидание/реальность? Что с отладкой?

[Artem Maximum]

Dmitriy Uvarov, я дополнил вопрос, либо напишите что именно вас интересует?

[Dmitriy Uvarov]

Пробовали убрать реинициализацию на контейнере?

[Artem Maximum]

Dmitriy Uvarov, да пробовал, однако в этом случае initialValues не попадают в инпуты формы. И к тому же при убранной реинициализации, проблема повторяется

Answer 1

[Сергей Сунцев]

К сожалению не могу сильно вникнуть в вашу проблему, но я обычно при работе с redux-form делаю в componentDidMount компонента, который я соединяю с формой метод this.props.initialize({...}) в котором прописываю объекты, соответствующие полям по умолчанию

componentDidMount (){
this.props.initialize({name : "vasya"})
}