componentDidMount очищает значения в форме - PullRequest
Новая
       13

componentDidMount очищает значения в форме

0 голосов
/ 13 марта 2019

Я использую библиотеку для определения города и штата на основе почтового индекса, введенного на заставке.У меня есть значения, переданные на нужную страницу, но я не могу поместить значение в поле ввода формы.

У меня раньше это работало с использованием 

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

, но это очистило бы значения в остальной части формы.Я попытался установить для параметра destroyOnUnmount значение false и для параметра forceUnregisterOnUnmount значение true и все равно очистить значения.Я не уверен, куда идти дальше с этим без реструктуризации формы редукса.Мой код:

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;

Я очень новичок, чтобы реагировать, поэтому я пытаюсь что-то изучать по мере продвижения

1 Ответ

0 голосов
/ 15 марта 2019

Когда вы вызываете initialize, поведение по умолчанию redux-form заключается в очистке формы и инициализации только тех значений, которые вы там передаете.Чтобы сохранить другие значения, вам нужно использовать свойства keepDirtyOnReinitialize: true и enableReinitialize: true

На заметку, насколько я вижу, вам не нужно вызывать initialize для componentDidMount.Вы можете перейти к своей форме (то есть вернуть свойство из mapStateToProps) с именем initialValues, заполненным городом, zip, firstName ...

Более подробная информация приведена в документации APIreduxForm ссылка

...