使用ReactJS

Question

我有一个与ReactJS有关的任务，并希望你们可以帮助我解决这个问题。这个问题很少。

Sample diagram of the project architecture

正如您在附图中看到的那样，我正在尝试创建一个关于我从服务器获得的响应的UI。

第一，我有一个 BASE 组件。在该组件中，我向服务器发送GET请求以获取响应以创建 LEVEL 2 COMPONENTS 。在我在应用程序中使用的架构中，我已经模块化了所有组件。所以，我只设计了 1 LEVEL 2 UI COMPONENT。 根据服务器的响应，它将自动重新生成需要在BASE组件中生成的LEVEL 2 COMPONENTS的数量。

根据这个示例，我有2个LEVEL 2 COMPONENTS，组件ID为“COMP_001”和“COMP_002”。通过服务器的响应，我可以在BASE组件上动态创建2个UI组件。

然后我需要从每个LEVEL 2 COMPONENTS发送另外2个GET请求及其各自的ID，以获得创建LEVEL 3 COMPONENTS的响应。这是我正在努力的地方。当我将我从前一个响应中获取的ID作为属性（this.props.component_id）绑定时，它将仅获取第一个组件ID并使用它发送请求。因此，LEVEL 3 COMPONENTS都有相同的数据。我希望通过使用COMP_001和COMP_002 ID发送GET请求，为LEVEL 3组件提供不同的数据。

请告诉我如何解决此问题。 提前谢谢。

BASE COMPONENT

var BASE = React.createClass({
    getInitialState: function () {
        return {baseData: []};
    },
    componentWillMount: function () {
        HTTPService.get('/get/base/component/data')
            .then(function (arrayData) {
                this.setState({baseData: arrayData.data});
            }.bind(this));
    },

    render: function () {
        var baseDataFunc = this.state.baseData.map(function (item) {
            return <LEVEL2COMPONENT L2COMPID={item._id} L2COMPNAME={item.comp_name}/>
        });
        return (
            <div>
                {baseDataFunc}
            </div>
        )
    }
});

LEVEL 2 COMPONENT

var LEVEL2COMPONENT = React.createClass({
    getInitialState: function () {
        return {level2data: []};
    },
    componentWillMount: function () {
        HTTPService.get('/get/level2/component/data/'+this.props.L2COMPID+'/with/this/id')
            .then(function (arrayData) {
                this.setState({level2data: arrayData.data});
            }.bind(this));
    },

    render: function () {
        var level2DataFunc = this.state.level2data.map(function (item) {
            return <LEVEL3COMPONENT L3COMPID={item._id} L3COMPNAME={item.comp_name}/>
        });
        return (
            <div>
                {level2DataFunc}
            </div>
        )
    }
});