Question

我有一个步骤工作流程。首先选择一个任务，然后选择一个快照......

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>
        );
    }
}

我将应用程序状态步骤存储在redux的商店中（然后是localStorage）。我有导航和回来的问题。它走向了旧的一步。陈旧的价值。我已经考虑过将步状态移到this.step中，但是这需要一个forceUpdate。我还将它作为URL的一部分存储在react-router中。我不确定这是不是一个好主意，因为我必须更改网址。每个步骤都需要上一步的数据，所以如果我更改了网址并返回它，我将不得不重新获取所有内容。

有没有办法设置初始步骤？我已尝试在componentWillUpdate中执行此操作，但在获取更新之前仍会呈现旧步骤。

谢谢！

Answer 1

我将步骤移至react-router。这似乎工作正常

反应还原步骤工作流程

1 个答案: