反應減少步驟工作流程

我有一個步驟工作流程。首先，你選擇一個任務，然後，你選擇一個快照，...反應減少步驟工作流程

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

反應減少步驟工作流程

回答

相關問題