传递给 redux-form initialValues 的值不会被渲染

Question

我在使用带有自定义组件的 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;

我可以提交表单并获得传递给 handleSubmit 的正确初始值，但我似乎无法获得显示的值。

根据 DevTools redux-form/INITIALIZE 使用正确的负载调用，并且 state->form->documentsEditForm->values/initial 的状态也被正确更新。

我还尝试加载固定的 initialValues 以排除 api 调用延迟的问题，但我得到了相同的结果。 "input: {value: ''}" 在 Field 道具中始终为空字符串。

我注意到在道具内部，表单组件接收的结构如下所示：

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

如果我尝试将字段的值直接设置为“props.initialValues._root.entries[0][1]，例如它有效。

我还注意到，因为完整的表单有一个名称为 "size" 的字段，所以这个值被正确地填充了上面 initialValues 中的值“2”。所以看起来好像表单正在查看错误的 "level" of initialValues 作为值。为了对此进行测试，我还尝试将字段命名为“__altered”，并且其值已正确设置为 false。

我做错了什么？非常感谢！

Answer 1

此问题已解决：参见 https://github.com/erikras/redux-form/issues/1744#issuecomment-251140419

基本上我必须导入 "redux-form/immutable" 而不是 "redux-form"。

传递给 redux-form initialValues 的值不会被渲染

Values passed to redux-form initialValues are not rendered

redux-form