redux形成初始值 - 获取错误

时间:2017-06-26 18:34:56

标签: reactjs redux-form react-redux-form

这是我的组件 - redux表单 - 无法加载初始值 - 在提交表单时获取验证错误,尝试了更新初始值的不同方法,但它们都不起作用?我在这里失踪了什么?如何将现有值作为道具传递?

import React, { PropTypes, Component } from 'react';
    import { reduxForm } from 'redux-form';
    import { Link } from 'react-router';
    import * as actions from '../../actions/myactions';

    class Component extends Component {

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

      componentDidMount() {
        this.props.getapidata(param);
      }

      handleFormSubmit({ email, name }) {
        this.props.createNewvalues(url, {
          email: emailval,
          name: nameval,
        }) :
      }

      renderAlert() {
        //blah
      }

      render() {
        const email = this.props.apiData && this.props.apiData.email ? this.props.apiData.email : [];
        const fname = this.props.apiData && this.props.apiData.fname ? this.props.apiData.fname : [];
        const initialvalues = {
          email: email_from_api,
          CCemail: name_from_api,

        };
        const { handleSubmit, fields: { email, name } } = this.props;
        return (
          <div>
            <div>
              <form onSubmit={handleSubmit(this.handleFormSubmit)}>
                    <fieldset>
                      <div>
                        <input value={emailsval} id="email" {...email} type="email"} required multiple />
                        <label className="input-label" htmlFor="Email">To</label>
                        { email.touched && email.error && <div> { email.error } </div> }
                      </div>
                    </fieldset>
                    <fieldset>
                      <div>
                        <input value={nameval} id="name" {...name} type="email"} multiple />
                        <label className="input-label" htmlFor="name">name (optional)</label>
                        { name.touched && name.error && <div> { name.error } </div> }
                      </div>
                    </fieldset>

              </form>
            </div>
          </div>
        );
      }
    }
    function validate(formProps) {
      const errors = {};
      if (!formProps.email) {

      }
      if (!formProps.name) {

      }
      return errors;
    }

    function mapStateToProps(state) {
      return {
        responseData: state.actions.responseData,
        initialValues: state.actions.apidata,
      };
    }

    export default reduxForm({
      form: 'myform',
      enableReinitialize: true,
      fields: [
        'email',
        'name',
      ],
      validate,
    }, mapStateToProps, actions)(Component);

2 个答案:

答案 0 :(得分:0)

您应该为组件添加defaultProps。

class App extends from React.Component{
  constructor(props){
     super(props);
  }

  render(){
      let { data } = this.props;
      return <h1>{ data }</h1>
  }
}

App.deafultProps = {
    data: 'Sample text'
}

答案 1 :(得分:0)

你的连线在哪里?尝试重新排列导出。这对我有用

export default connect( mapStateToProps, { load_default , update_section} )(
reduxForm({
    form: 'myForm',
    enableReinitialize : true 
})(EditSection)
);