Значения, переданные в redux-form initialValues, не отображаются

У меня проблема с отображением initialValues, переданных в форму с использованием redux-form / immutable (v6.0.5) с настраиваемым компонентом:

// WRAPPER COMPONENT
import React from 'react';
import {connect} from 'react-redux';

import DocumentsEditForm from './documentsEditForm';

import {documentsGetOneInfo} from './../../../modules/documents/actions/documents_get_one_info';
import {documentsPut} from './../../../modules/documents/actions/documents_put';


@connect((state) => {
  return ({
    selectedDocument: state.getIn(['documents', 'selectedDocument']).toJS()
  });
})
class DocumentsEdit extends React.Component {

  static propTypes = {
    dispatch: React.PropTypes.func,
    isLoading: React.PropTypes.bool,
    routing: React.PropTypes.object,
    selectedDocument: React.PropTypes.object
  };

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentWillMount() {
    this.props.dispatch(adminDocumentsGetOneInfo(this.props.routing.locationBeforeTransitions.query.id));
  }

  handleSubmit(data) {
    this.props.dispatch(documentsPut(data));
  }

  render() {
    const initialValues = (this.props.selectedDocument.id) ? {
      filename: this.props.selectedDocument.filename,
      id: this.props.selectedDocument.id
    } : {};

    return (
      <DocumentsEditForm
        enableReinitialize
        initialValues={initialValues}
        onSubmitDocumentsEditForm={this.handleSubmit}
      />
    );
  }
}

export default DocumentsEdit;

Вот сам компонент формы:

import React from 'react';
import {Field, reduxForm} from 'redux-form/immutable';
import {Button} from 'react-bootstrap';

import InputTextRedux from './../../shared/components/input_text_redux';
import InputSelectRedux from './../../shared/components/input_select_redux';

let DocumentsEditForm = (props) => {
  const {error, handleSubmit, pristine} = props;

  return (
    <form
      onSubmit={handleSubmit(props.onSubmitDocumentsEditForm)}
    >
      <Field
        component={InputTextRedux}
        disabled
        name="id"
        type="text"
      />
      <Field
        component={InputTextRedux}
        name="filename"
        type="text"
      />
      <Button
        type="submit"
      >
        {'Save'}
      </Button>
    </form>
  );
};

DocumentsEditForm.propTypes = {
  error: React.PropTypes.object,
  handleSubmit: React.PropTypes.func,
  onSubmitDocumentsEditForm: React.PropTypes.func,
  pristine: React.PropTypes.bool
};


documentsEditForm = reduxForm({
  form: 'documentsEditForm'
})(DocumentsEditForm);

export default DocumentsEditForm;

А вот и настраиваемый компонент InputTextRedux:

import React from 'react';
import {ControlLabel, FormControl, FormGroup, InputGroup} from 'react-bootstrap';

const InputTextRedux = (props) => {
  const {
    id,
    disabled,
    input,
    type
  } = props;

  return (
    <div>
      <FormGroup
        name={input.name ? input.name : ''}
      >
        <ControlLabel>
          {'Label'}
        </ControlLabel>
        <InputGroup>
          <FormControl
            disabled={disabled ? true : false}
            id={id ? id : input.name}
            onChange={(event) => {
              input.onChange(event.target.value);
            }}
            type={type ? type : 'text'}
            value={input.value ? input.value : ''}
          />
          <FormControl.Feedback />
        </InputGroup>
      </FormGroup>
    </div>
  );
};

InputTextRedux.propTypes = {
  disabled: React.PropTypes.bool,
  id: React.PropTypes.string,
  input: React.PropTypes.object,
  type: React.PropTypes.string,
};

export default InputTextRedux;

Я могу отправить форму и получить правильные значения initialValues, переданные в handleSubmit, но я не могу получить отображаемые значения.

Согласно DevTools, redux-form / INITIALIZE вызывается с правильной полезной нагрузкой, а также правильно обновляется состояние в state-> form-> documentsEditForm-> values ​​/ initial.

Я также попытался загрузить фиксированные значения initialValues, чтобы исключить проблемы с задержкой вызова API, но получил тот же результат. "input: {value: ''}" всегда является пустой строкой в ​​свойствах поля.

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

props {
    ....
    initialValues: {
        __altered: false,
        _root: {
            entries: [
                [ 
                    'id',
                    '123456'
                ],
                [
                    'filename',
                    'test.txt'
                ]
            ]
        },
        size: 2
    },
    ....
}

Если я попытаюсь установить значение поля непосредственно на «props.initialValues._root.entries [0] [1], например, это сработает».

Также я заметил, что, поскольку полная форма имеет Поле с именем = "size", это значение правильно заполняется значением "2" из initialValues ​​выше. Кажется, что форма смотрит на неправильный «уровень» initialValues ​​для значений. Чтобы проверить это, я также попытался назвать поле «__altered», и его значение было правильно установлено на false.

Что я делаю неправильно? Большое спасибо!


person user6849300    schedule 19.09.2016    source источник


Ответы (1)


Проблема решена: см. https://github.com/erikras/redux-form/issues/1744#issuecomment-251140419

В основном мне приходилось импортировать «redux-form / immutable» вместо «redux-form».

person user6849300    schedule 11.11.2016