Why doesn't redux-form work correctly when there are initialValues?

Question

React

There is a redux-form form initialized in the container:

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

inside the form component is used:
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 component:

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,
}

The question is why, when there is an initialValues ​​parameter in the container, the following bean:

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

starts calling the this.generateCKEditorField(field, meta) function every time the user changes any field (any) in an existing form.
As a solution, I changed the component like this:

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

in other words, now the component generates a nested component and passes the values ​​from the component's redux-field there, only once and is no longer re-created when trying to enter data into other fields.
However, my task requires that fields be filled in programmatically when a specific function is called in a form component:

autofill('description', selectedCompetition.content)

In this case, the Field component is re-rendered, but it does not call the this.generateCKEditorField function again to insert new data.
This misbehavior only occurs when there are initialValues ​​in the container (in which the form is created). If you remove this parameter, then everything works as it should. Redrawing does not occur when filling in any field and occurs when the field values ​​are updated programmatically.
My task is to either understand and fix the reason for the incorrect work of redux-form
, or to make it so that when the fields are filled programmatically through the autofill(fieldName, newValue)
Field function, the component still causes the component generated by it to redraw.

Answer 1

Unfortunately, I can’t really get into your problem, but when I work with redux-form, I usually do this.props.initialize({...}) method in the componentDidMount of the component, which I connect to the form with the this.props.initialize({...}) method in which I prescribe objects corresponding to the fields by default

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