Reactjs index.jsx中的React构造函数

我希望对我承担的项目的代码进行一些更改。 我不得不禁止webpack插件设置baseURL，现在当页面加载到index.jsx中时，让构造函数调用getResources并使getResources显式设置process.env.baseURL。我已经将getResources添加到main.jsx中，但不确定index.jsx中的构造函数。如果有人在这方面有任何专业知识并能提供帮助，那就太好了。 我将提供以下代码：

main.jsx
 let baseURL = process.env.baseURL;

export function getResources() {
if (process.env.APP_SERVER_URL) {
    baseURL = process.env.APP_SERVER_URL;
} else {
        let urlPath = getHref() + '/api/v1/resources';
        return request.get(urlPath).then(function (response) {
        baseURL = response.data;
        });
    }
}

export default class IndexDisplay extends React.Component {

constructor() {
    super();
    this.state = { branchData: "",
        displayComponent:"root",
        templateData: []
    }
}

componentWillMount() {
    axios.get(baseURL + 'workflow')
        .then(function (response) {
            this.setState({
                "templateData": ParseWorkflows(response.data)
            },this.updateState)
        }.bind(this));
}

index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import {Router, Route, browserHistory, IndexRoute} from "react-router"
import WorkflowTemplateListDisplay 
from'./template_list_view/workflowTemplateListDisplay.jsx'
import WorkflowTemplateByAgencyDisplay from 
'./template_list_view/workflowTemplateByAgencyDisplay.jsx'
import WorkflowInstanceDisplay from 
'./workflowInstanceView/workflowInstanceDisplay.jsx'
import GraphicalViewDisplay from 
'./workflowGraphicalView/graphicalViewDisplay.jsx'
import WorkflowStepsTemplateDisplay 
from'./templateStepsView/workflowStepsTemplateDisplay.jsx';
import WorkflowSearchByWorkflowIdDisplay from 
'./searchByWorkflowID/workflowSearchByWorkflowIdDisplay.jsx'
import WorkflowTemplateMultiSearchDisplay from 
'./template_list_view/workflowTemplateMultiSearchDisplay.jsx'
import TemplatesHierarchyTableDisplay from 
'./template_list_view/components/TemplatesHierarchyTable.jsx'
import Main from './main.jsx'

ReactDOM.render((
<Router  history={browserHistory}>
    <Route path='/' component={Main}>
        <IndexRoute component={WorkflowTemplateListDisplay}/>
        <Route path='/workflowInstances' component={WorkflowInstanceDisplay}/>
        <Route path='/workflowStepsTemplate' component={WorkflowStepsTemplateDisplay}/>
        <Route path='/pictorialView' component={GraphicalViewDisplay}/>
        <Route path='/workflowTemplateByAgency' component={WorkflowTemplateByAgencyDisplay}/>
        <Route path='/searchByWorkflowID' component={WorkflowSearchByWorkflowIdDisplay}/>
        <Route path='/search' component={WorkflowTemplateMultiSearchDisplay}/>
        <Route path='/treeView' component={TemplatesHierarchyTableDisplay}/>
    </Route>
</Router>), document.getElementById('app'));

index.jsx
从“React”导入React
从“react dom”导入react dom
从“react Router”导入{Router，Route，browserHistory，IndexRoute}
导入WorkflowTemplateListDisplay
来自“./template\u list\u视图/workflowTemplateListDisplay.jsx”
从导入WorkflowTemplateByAgencyDisplay
'./模板\列表\视图/workflowTemplateByAgencyDisplay.jsx'
从导入工作流InstanceDisplay
“./workflowInstanceView/workflowInstanceDisplay.jsx”
从导入GraphicalViewDisplay
“./workflowGraphicalView/graphicalViewDisplay.jsx”
导入工作流步骤模板显示
来自“./templateStepsView/workflowStepsTemplateDisplay.jsx”；
从导入WorkflowSearchByWorkflowId显示
'./searchByWorkflowID/workflowSearchByWorkflowIdDisplay.jsx'
从导入WorkflowTemplateMultiSearchDisplay
“./template_list_view/workflowTemplateMultiSearchDisplay.jsx”
从导入TemplatesHierarchyTableDisplay
“./template_list_view/components/TemplatesHierarchyTable.jsx”
从“/Main.jsx”导入Main
ReactDOM.render((
)，document.getElementById（'app'）；

在从api获取baseUrl之前，您不能执行任何请求，因为您的baseUrl为

null

。这不是个好主意。这是这个问题的一个特例。您需要将baseURL的承诺链接到您使用它的任何地方，或者仅在获得baseURL后在您使用它的地方装载组件。有几件事，停止使用

jsx

extension是不必要的，您可以对组件文件使用

js

extension。facebook/react工程师甚至建议您这样做。另外，您的构造函数缺少

props

，但是如果您使用ES2016重构初始化状态，您就不用担心了：

state={branchData:”，displayComponent:“root”，templateData:[]}