componentDidMount 清除表单中的值

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'];

};

地址.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 上调用初始化。您可以将名为initialValues 的表单传递给您的表单（意味着从mapStateToProps 返回一个属性），其中包含城市、邮政编码、名字...

更多信息在reduxFormlink的API文档中提供