Question

我正在使用一个图书馆，根据在初始屏幕中输入的邮政编码来计算城市和州。我已将值传递到所需的页面，但无法将值放置在表单的输入中。

我以前使用的是这个

componentDidMount() {
  this.props.initialize({city: this.city, state:this.state, zipCode:this.zipCode });
}

，但这将清除表单其余部分的值。我尝试将destroyOnUnmount设置为false并将forceUnregisterOnUnmount设置为true，但仍会清除这些值。我不确定在不重新构造redux表单的情况下下一步该怎么做。我的代码是：

CarObjectInfo.js

import vinDecoder from 'vin-decode';

export const getCarYear = (vinNumber) =>{
   var carYear;
   var carObject = vinDecoder(vinNumber).decode();
   return carYear = carObject['year'];

};

Address.js

import React, { Fragment, Component} from 'react';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import RenderField from './fields/RenderField'; 
import zipField from './fields/zipField';
import { ZipCodeValidator, validZipCode} from '../../helpers/form_validators/ZipCodeValidator';
import {GeneralFieldValidators, requiredStreetAddress, validStreetAddress, requiredCity, validCity} from '../../helpers/form_validators/GeneralFieldValidators'
import { Progress } from 'reactstrap';
import {connect} from 'react-redux';


const renderError = ({ meta: { touched, error } }) =>
  touched && error ? <span>{error}</span> : false;


   const state = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 
   'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 
   'MD', 'MA', 'MI', 'MS', 'MO', 'MT',
   'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 
   'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 
   'WI', 'WY'];
   const renderStateSelector = ({ input, label, type, meta: { 
   touched, error } }) => (
   <Fragment>
     <label htmlFor={label}>{label}</label>
       <div>
        <select {...input} type={type} className="form-control">
          <option value=""></option>
            {state.map(val => <option value={val} key={val}>{val} . 
          </option>)}
         </select>
         {touched && error && <span className="errorMessage">{error} . 
        </span>}
       </div>
     </Fragment>
 );
 const requiredState = value => value ? undefined : 'Please provide a 
 state'

 class Address extends Component{
   constructor(props){
    super(props)
    this.handleSubmit = this.props.handleSubmit;
    this.previousPage = this.props.previousPage;
    this.zipCode = this.props.zipCode;
    this.city = getCity(this.zipCode);
   }

   render (){
    const {handleSubmit, previousPage, firstName, zipCode, city} = 
     this.props;

  return (
<Fragment>
  <Logo />
  {/*Fragment is equivalent to wrapping it all up in a div */}
  <div className="container">
  <div className="box">
    <div className="row">
      <div className="col-lg-12 col-sm-12 text-center">
        <br />
          <div>
            <Progress animated value="33">33%</Progress>

        </div>
        <br/>
        <span className="title text-center">Step 2 of 6</span>
        <h2 className="text-center">Address</h2>
         </div>
    </div>

    <form className="form" onSubmit={handleSubmit}>
      <hr />
      <b className="formHeading"><i className='fa fa-home'></i> Hey {firstName}, what's your home address?</b>
      <br />
      <br />
      <div className="col-md-6 mx-auto">
        <Field name="streetAddress" type="text" component={RenderField} label="Street Address" validate={[requiredStreetAddress, validStreetAddress]} />
        <br />
      </div>
      <div className="col-md-6 mx-auto">
        <Field name="aptUnit" type="text" component={RenderField} label="Apt/Unit" />
        <br />
      </div>
      <div className="col-md-6 mx-auto">
      <div className="form-row">
      <div className="col-md-8">
      <Field name="city" type="text" component={RenderField} readonly="true" label="City"  validate={[requiredCity, validCity]} />
      </div>
      <div className="col-md-4">
      <Field name="state" type="text" component={renderStateSelector} label="State" validate={requiredState} />
        <br />
      </div>
      </div>
      </div>
      <div className="col-md-6 mx-auto">
        <Field name="zipCode" type="text" value={zipCode} component={zipField} readonly="true" label="Zip Code"  validate={validZipCode} />
        <br />
      </div>
       <form previousPage={this.props.previousPage}>
        <button type="submit" id="nextBtn" className="btn btn-primary form-control">Next</button>
        <button type="submit" id="backBtn" onClick={previousPage} className="btn btn-light form-control">Back</button>
        <br />       
        </form>
      {/*End of Form */}
    </form>
    </div>
    <Footer />
  </div>

</Fragment>

);
}
}



Address = reduxForm({
 form: 'insurance',
 destroyOnUnmount: false,
 forceUnregisterOnUnmount: true,
})(Address);

const selector = formValueSelector('insurance') 

Address = connect(state => {

 const zipCode = selector(state, 'zipCode');
 const firstName = selector(state, 'firstName');

 return {
  zipCode,
  firstName,
  city   
 }

 })(Address)

 export default Address;

我是一个很新的反应者，所以在学习过程中尝试学习

Answer 1

调用initialize时，redux-form的默认行为是清除表单并仅初始化在此传递的值。要保留其他值，您需要使用属性keepDirtyOnReinitialize: true和enableReinitialize: true

据我所知，您不必在componentDidMount上调用initialize。您可以传递到表单（意思是从mapStateToProps返回一个属性），该表单称为initialValues，其中填充了城市，邮政编码，名字...

reduxForm link的API文档中提供了更多信息

componentDidMount清除表单中的值

1 个答案: