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;

我可以提交表单并将正确的initialValues传递给handleSubmit，但我似乎无法显示这些值。

根据DevTools，使用正确的有效负载调用redux-form / INITIALIZE，并且state-＆gt; form-＆gt; documentsEditForm-＆gt; values / initial的状态也会正确更新。

我也尝试加载固定的initialValues以排除api调用延迟的问题，但我得到了相同的结果。＆＃34;输入：{value：＆＃39;＆＃39;}＆＃34;在Field道具中始终是一个空字符串。

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

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

如果我尝试将字段的值直接设置为＆＃34; props.initialValues._root.entries [0] [1]，例如它可以正常工作。

我也注意到，因为完整的表单有一个名字=＆＃34;大小＆＃34;使用值＆＃34; 2＆＃34;正确填充此值从上面的initialValues。因此，似乎表单正在查看错误的＆＃34;级别＆＃34;值的initialValues。为了测试这个，我还尝试命名一个字段＆＃34; __改变＆＃34;并且其值已正确设置为false。

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

Answer 1

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

基本上我必须导入＆＃34; redux-form / immutable＆＃34;而不是＆＃34; redux-form＆＃34;。

传递给redux-form initialValues的值不会呈现

1 个答案: