Блог

хорошо, я признаю, что это немного запутанно, но, пожалуйста, потерпите меня. Пытаюсь понять, почему мои redux-формы: A: не устанавливайте ititialValues, пока я не установлю хранилище в другом месте приложения .. например. если у меня есть другое событие, которое вызывает getFirstTrip, то оно находится в хранилище и может корректно загрузить мою форму с помощью начальных значений.

B: уничтожаются, когда я снова нажимаю на ссылку маршрутизатора. Каждый раз, когда я нажимаю на ссылку маршрутизатора, она ведет себя так же, как и при первоначальном нажатии.. несмотря на то, что хранилище есть .. поля и начальные значения пусты.

Использование: react-router, react-redux, react-form

структура, подобная этой: view.js

 
 const onSubmit = (formValues) => {
   props.updateTrip(formValues); //< traditional put action to api
 };

 useEffect(() => {
   props.getFutureTrip(); // traditional get action to api
   //the action dispatches the reducer to create the vacations.nextVacation.tripInfos

 }, []);

 return (
   <div>
     Register Page
     <TripRegistrationForm onSubmit={onSubmit} />
     <Highlight>
       {output}</Highlight> 
   </div>
 );
};

const mapStateToProps = state => {
return {
 initialValues: state.vacations.nextVacation.tripInfos //< this doesn't seem necessary. 
 }
}

export default connect(mapStateToProps,{updateTrip, getFutureTrip}) (TripsRegistration);
  

Родительская форма TripRegistrationForm.js

 class TripRegistrationForm extends Component {
  constructor(props) {
    console.log("props", props);
    super(props);
  }

 render() {
    const { onSubmit, onChange} = this.props;
    return (
      <div>
          <childForm
            onChange={onChange}
            onSubmit={onSubmit}
          />
      </div>
    );
  }
}

TripRegistrationForm.propTypes = {
  onSubmit: PropTypes.func.isRequired,
};

TripRegistrationForm = reduxForm({ form: "tripRegistration" })(TripRegistrationForm);

TripRegistrationForm = connect((state, ownProps) => ({
  initialValues: state.vacations.nextVacation.tripInfos
}))(TripRegistrationForm);


 export default TripRegistrationForm; 
  

содержимое формы (они действительно заполняют начальные значения.. но не последовательно… когда-либо)
childForm.js

 const RegistrationThirdPage = (props) => {
  const { handleSubmit, pristine, submitting, lockForm } = props;

  return (
    <form disabled={lockForm} className="ui form error" >
       <FormSection >
      
      <h2>
        Trip amp; Travel Details
      </h2>
 
      <Form.Group>
      
        <Field
          name="arriving"
          placeholder="Arriving"
          component={renderDatePicker}
          label="Select your arrival date"
        />
        <Field
          component={renderSelect}
          label="Number of Days"
          name="packageDays"
          options={singleArrayToKVs(colors)}
        />
      </Form.Group>

     
<Form.Group>
<div>
        <Button type="button" disabled={lockForm}  className="ui-button green" onClick={handleSubmit(values => props.onSubmit({...values, lockVacation:false}))}>
          Save my changes
        </Button>
</div><div>
        
        <Button type="submit" className="ui-button primary" disabled={bookVacation(pristine,submitting,lockForm)}
        onClick={handleSubmit(values => props.onSubmit({...values, lockVacation:true}))}>
       Book my vacation
        </Button>
        </div>
  </Form.Group>      
     </FormSection>
    </form>
  );
};
export default reduxForm({
  form: "tripRegistration", //Form name is same
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
 // validate,
})(RegistrationThirdPage);
  

мои действия выглядят следующим образом:

 export const getFutureTrip = () => async (dispatch,getState) => {
  const{token} = getState().auth
  if(!token)
  return null; 
    const response = await axios.get(`/api/trip/futureTrip`,{headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
     }});
    console.log("response.data from getFutureTrip", response.data);
  
    dispatch({ type: GET_FUTURE_TRIP, payload: response.data });
  };