反应减少步骤工作流程
问题描述:
我有一个步骤工作流程。首先,你选择一个任务,然后,你选择一个快照,...反应减少步骤工作流程
class RestorePage extends Component {
componentDidMount() {
const { system_id: systemId } = this.props.params;
const { setStep, fetchSystem } = this.props;
const { query } = this.props.location;
if (!query.zfbrowser_restore) {
fetchSystem(systemId);
setStep(STEPS.SELECT_TASK);
} else {
setStep(STEPS.RESTORE_FORM);
}
}
render() {
const { step, isLoadingSystem } = this.props;
return (
<div>
<h1 className="__page-title" data-ztest="restore_title">Restore</h1>
{(() => {
if (isLoadingSystem) {
return (<Spinner>Loading System...</Spinner>);
}
switch (step) {
case STEPS.SELECT_TASK:
return <Tasks />;
case STEPS.SELECT_SNAPSHOT:
return <Snapshots />;
case STEPS.FILE_BROWSER:
return <FileBrowser />;
case STEPS.RESTORE_FORM:
return <Form />;
default:
return (<div>Invalid Step</div>);
}
})()}
</div>
);
}
}
我存储在终极版的商店应用程序的状态步(然后,localStorage的)。我在导航和回来时遇到问题。它走到了老一步。陈旧的价值。我想过把step状态移动到this.step中,但是这需要一个forceUpdate。我也将它作为URL的一部分存储在react-router中。我不确定这是否是个好主意,因为我必须更改网址。每一步都需要上一步的数据,所以如果我更改网址并返回到它,我将不得不再次获取所有内容。
有什么办法可以设置初始步骤吗?我试过在componentWillUpdate中做这件事,但在获取更新之前它仍旧呈现旧步骤。
谢谢!
答
我将步骤移至react-router。这似乎工作正常