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

Question

我在使用 redux-form/immutable (v6.0.5) 和自定义组件渲染传递给表单的 initialValues 时遇到问题:

// 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 的状态也被正确更新。

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

我注意到的是，在 props 中，表单组件接收到的结构如下所示:

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

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

我还注意到，由于完整的表单有一个名称为 =“size”的字段，这个值被正确填充为来自上面 initialValues 的值“2”。因此，表单似乎正在查看值的初始值的错误“级别”。为了测试这一点，我还尝试将字段命名为“__altered”，并且其值已正确设置为 false。

我究竟做错了什么？非常感谢!

Answer 1

已解决:见 https://github.com/erikras/redux-form/issues/1744#issuecomment-251140419

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