开始作出反应根渲染服务器后获取成功

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有条件地显示微调。