问题描述
好的,我承认这有点麻烦,但请多多包涵。 试图了解为什么我的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,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 });
};
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)