Question

好的，我承认这有点麻烦，但请多多包涵。试图了解为什么我的redux形式：答：在我将应用商店设置为其他位置之前，请不要设置ititialValues。如果我有另一个调用getFirstTrip的事件，则它在存储中，并且可以使用intialValues正确加载我的表单。

B：当我再次单击路由器链接时，请消灭自己。每次单击路由器Link时，它的行为都与初始单击的行为相同。即使商店在那里，字段和initialValues也为空。

使用： 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 & 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 });
  };

redux形式不设置初始值多形式

0 个答案: