反应减少步骤工作流程

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

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中做这件事，但在获取更新之前它仍旧呈现旧步骤。

谢谢！

来源

2017-07-02 Ryan Ragle

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

来源

2017-07-03 15:52:01

反应减少步骤工作流程

回答

相关问题