javascript - React redux 提交并使用下一页提交的数据表单
问题描述
我正在使用 redux-form 并在提交时尝试将提交的数据传递到另一个页面,在那里我应该使用提交的 redux-form 数据来构建其他内容。我对 redux 领域还很陌生,但我试图了解 reducer 和 action creator 的工作原理。在这一点上,我正在将提交的数据付诸行动,并且在 reducer 中,有效负载是未定义的。那么我怎样才能有正确的提交表单流程->调度一个动作->将数据传递到reducer->将数据获取到下一页。
这是我的 redux 形式:
<form method="POST" action="/" autoComplete="off" noValidate onSubmit={handleSubmit(handleSubmitData)}>
{initialFields.map((key, index) => {
return (
<Field key={index} label={key} name={key} component={renderTextField} />
);
})}
<Button type="submit" disabled={submitting} size="small" variant="contained" color="primary"> Submit </Button> {/* onClick={submitting ? submitting : reset } */}
<Button type="button" disabled={pristine || submitting} size="small" onClick={reset} variant="contained" color="secondary"> Clear Values </Button>
</form>
出口:
function mapStateToProps({ form }) {
return form;
}
export default connect(mapStateToProps)(reduxForm({
form: "swimForm",
validate,
asyncValidate,
})(SwimForm));
行动:
export const getSwimFormValues = (props) => async dispatch => {
console.log("From Action",props)
dispatch({
type: SUBMIT_SWIM_FORM,
payload: props.values
});
};
和减速机:
const initialState = {
values: []
};
export default function(state = initialState, action) {
switch (action.type) {
case SUBMIT_SWIM_FORM:
console.log("From Reducer", action,)
return {
...state,
values: payload
};
default:
return state;
}
}
解决方案
首先在行动中确保更改payload
为action.payload
otherwsie,它将始终未定义。然后将状态映射到道具的部分创建一个像这样的对象:
const mapStateToProps = state => {
// make sure that the name of the property with form values is actually `form`
// you can log the state and see what exactly you need to assign
console.log(state);
return {
form: state.form,
}
};
推荐阅读
- python - python线程中的线程太多 - 递归遍历
- c# - 如何将 ulong 路由到 ASP.NET 页面
- python - 从 curl 转换为 python request.post
- uwp - Windows IOT 核心将接收数据发送到“umwatson.trafficmanager.net”
- r - seq 日期向量的类型为 double 但显示为字符
- javascript - 如何使用设置间隔增加对象键值
- javascript - axios在等待响应时是否使用cpu?
- javascript - 是否可以通过单击 Electron 的 MenuItem 类型复选框不关闭当前子菜单?
- python - Python如何中断当前方法来执行另一个方法[关闭]
- arrays - 给定一组数组,找出哪些数组是另一个数组的子集