開始作出反應根渲染服務器後獲取成功

Question

我想獲取一些數據（如翻譯/初始設置等），之後啓動應用程序

如何我應該做的是，在最好的方法是什麼？

現在我正在渲染一個微調器，並在獲取成功後重新渲染React根。 但我不確定這是不是很好的方法。

感謝您的幫助！

//launch fetch and wait for the response. After that re -render Root 
bootPreparationInit() 
    .then(() => { 
     render(
      <RHTLContainer> 
       <MuiThemeProvider> 
         <RootContainer store={store} history={history} /> 
       </MuiThemeProvider> 
      </RHTLContainer>, 
      document.getElementById("root") 
     ); 
    }); 

// it for tests. Because Karma sometimes can't see the root element 
(() => { 
    if (!document.getElementById("root")) { 
     const rootEl = document.createElement("div"); 
     rootEl.setAttribute("id", "root"); 
     document.body.appendChild(rootEl); 
    } 
})(); 

// render a spinner before data load 
render(
    <RHTLContainer> 
     <MuiThemeProvider> 

       <div className="spinner-ico-box"> 
        <CircularProgress /> 
       </div> 

     </MuiThemeProvider> 
    </RHTLContainer>, 
    document.getElementById("root") 
); 

// it for webpack HMR 
if (module.hot) { 
    module.hot.accept("./core/containers/Root.container",() => { 
     const NewRootContainer = require("./core/containers/Root.container").default; 

     render(
      <RHTLContainer> 
       <NewRootContainer store={store} history={history} /> 
      </RHTLContainer>, 
      document.getElementById("root") 
     ); 
    }); 
} 

Answer 1

我建議在RHTLContainer組件構造和獲取成功的狀態保存獲取的數據中獲取數據：

constructor() { 
    ... 
    this.state = { 
     dataLoading: true; 
    }; 
    bootPreparationInit() 
     .then((responseData) => { 
      ... 
      this.setState({ 
       dataLoading: false, 
       fetchedData: respondeData 
      }); 
     }); 
} 

然後你的組件裏，你可以使用this.state.dataLoading有條件地顯示微調。