Reactjs React redux mapStateToProps值未更新
我有一个奇怪的场景,在我的redux开发工具中,我可以看到redux状态已经更新,但该值没有反映在连接到该状态的组件中 所以我有一个组件CreateEnvironment,比如Reactjs React redux mapStateToProps值未更新,reactjs,redux,react-redux,formik,Reactjs,Redux,React Redux,Formik,我有一个奇怪的场景,在我的redux开发工具中,我可以看到redux状态已经更新,但该值没有反映在连接到该状态的组件中 所以我有一个组件CreateEnvironment,比如 export interface StateProps { environment: EnvironmentStep; selectProduct: SelectProductStep; eula: EULAStep; license: LicenseStep; infrastructure: Inf
export interface StateProps {
environment: EnvironmentStep;
selectProduct: SelectProductStep;
eula: EULAStep;
license: LicenseStep;
infrastructure: InfrastructureStep;
network: NetworkStep;
certificate: CertificateStep;
products: any;
}
export interface DispatchProps {
onFormValuesUpdate: (key: string, value: any) => void;
}
type Props = StateProps & DispatchProps;
interface State {
dashboard: boolean;
}
class CreateEnvironment extends Component<Props, State> {
private page: RefObject<any>;
constructor(props: Props) {
super(props);
this.state = { dashboard: false };
this.page = React.createRef();
}
public render() {
console.log("Hi"); //tslint:disable-line
if (this.state.dashboard) {
return <Redirect to="/dashboard" />;
}
const {
environment,
eula,
selectProduct,
infrastructure,
network,
license,
certificate,
onFormValuesUpdate
} = this.props;
return (
<Fragment>
<h2>Create Environment</h2>
<div style={{ height: '100%', paddingBottom: '30px' }}>
<WorkFlow
orientation="vertical"
onNext={this.onNext}
onFinish={this.onFinish}
>
<WorkFlowPage pageTitle="Environment">
<Environment
environment={environment}
onUpdate={onFormValuesUpdate}
ref={this.page}
/>
</WorkFlowPage>
<WorkFlowPage pageTitle="Products & Solutions">
<SelectProduct
ref={this.page}
selectProduct={selectProduct}
onUpdate={onFormValuesUpdate}
/>
</WorkFlowPage>
<WorkFlowPage
pageNavTitle="EULA"
pageTitle="End User License Agreement Details"
>
<Eula eula={eula} ref={this.page} onUpdate={onFormValuesUpdate} />
</WorkFlowPage>
<WorkFlowPage pageTitle="License">
<License
license={license}
ref={this.page}
onUpdate={onFormValuesUpdate}
/>
</WorkFlowPage>
<WorkFlowPage pageTitle="Infrastructure">
<Infrastructure
infrastructure={infrastructure}
ref={this.page}
onUpdate={onFormValuesUpdate}
/>
</WorkFlowPage>
<WorkFlowPage pageTitle="Network">
<Network
network={network}
ref={this.page}
onUpdate={onFormValuesUpdate}
/>
</WorkFlowPage>
<WorkFlowPage pageTitle="Certificate">
<Certificate
certificate={certificate}
ref={this.page}
onUpdate={onFormValuesUpdate}
/>
</WorkFlowPage>
<WorkFlowPage pageTitle="Products">I am products step</WorkFlowPage>
<WorkFlowPage pageTitle="Summary">I am summary step</WorkFlowPage>
<WorkFlowButton role="previous">Back</WorkFlowButton>
<WorkFlowButton role="next">Next</WorkFlowButton>
<WorkFlowButton role="finish">Finish</WorkFlowButton>
</WorkFlow>
</div>
</Fragment>
);
}
private onNext = () => {
if (this.page.current) {
this.page.current.handleSubmit();
}
}
private onFinish = () => {
this.setState({
dashboard: true
});
}
}
export default CreateEnvironment;
单击下一个WorkflowButton
时,通过传递action updateEnvironmentWorkflow更新redux状态。行动如下:
export interface UpdateEnvironmentWorkflow {
type: Constants.UPDATE_ENVIRONMENT_WORKFLOW;
payload: {
key: string;
value: any;
};
}
export type CreateEnvironmentAction = UpdateEnvironmentWorkflow;
export const updateEnvironmentWorkflow = (
key: string,
value: any
): UpdateEnvironmentWorkflow => ({
payload: { key, value },
type: Constants.UPDATE_ENVIRONMENT_WORKFLOW
});
我的减速机是这样的:
const createEnvironment = (
state: CreateEnvironment = initialState.createEnvironment,
action: CreateEnvironmentAction
) => {
switch (action.type) {
case Constants.UPDATE_ENVIRONMENT_WORKFLOW:
return {
...state,
[action.payload.key]: {
...state[action.payload.key],
formValues: action.payload.value
}
};
default:
return state;
}
};
export default createEnvironment;
现在奇怪的是,如果我单击next按钮,redux状态将更新为新值。如果我导航到其他页面并返回创建环境,我的表单值将显示redux存储状态中更新的值
但是,如果我只是点击上一个按钮,我的状态值不会显示更新的值。
证书的render()中的console.log(formValues)仅显示初始值
任何帮助都将不胜感激。谢谢
表单的initialValues也是FormikInitialValues。这可能也是一个formik问题我也遇到了类似的问题。您是否找到了无法获取更新状态的解决方案?
export interface UpdateEnvironmentWorkflow {
type: Constants.UPDATE_ENVIRONMENT_WORKFLOW;
payload: {
key: string;
value: any;
};
}
export type CreateEnvironmentAction = UpdateEnvironmentWorkflow;
export const updateEnvironmentWorkflow = (
key: string,
value: any
): UpdateEnvironmentWorkflow => ({
payload: { key, value },
type: Constants.UPDATE_ENVIRONMENT_WORKFLOW
});
const createEnvironment = (
state: CreateEnvironment = initialState.createEnvironment,
action: CreateEnvironmentAction
) => {
switch (action.type) {
case Constants.UPDATE_ENVIRONMENT_WORKFLOW:
return {
...state,
[action.payload.key]: {
...state[action.payload.key],
formValues: action.payload.value
}
};
default:
return state;
}
};
export default createEnvironment;