Question

我正在做一个反应应用程序。我的应用程序中有两个组件。标题和文件列表。在标题中，我有一个下拉按钮，它有三个选项：媒体文件，作业和新媒体文件。这三个选项都适用于三个不同的文件列表。当我选择其中任何一个时，完整的媒体文件应该改变。

听说我试过了：

1）。在减速机中存储下拉按钮的状态。 2）。在＆＃34;文件＆＃34;组件，将所有三个组件（媒体文件，作业和新媒体文件）映射到此下拉状态。相应地渲染。

问题是ajax调用。三个组件（媒体文件，作业和新媒体文件）中的每一个都从api中获取文件。所以我在每一个中都进行了ajax调用。我在这些组件的componentsWillMount方法中进行了这个ajax调用。

事情没有按预期发挥作用。其中一个组件的项目始终保持不受约束。我认为由于并行ajax调用，这种情况正在发生。

这样做的最佳方式是什么？

听到我的代码

index.js（听到我检查下拉按钮的状态并相应地渲染组件）

render(){

var MediaFilesView;
if(this.props.search_option_changed_reducer.index == 1){
    MediaFilesView = <ReviewTable
        //items={this.props.list}
        selectedRows={this.props.selectedRows}
        authToken={this.props.auth_token}
        onRowSelection={this.onRowSelection}
        setCurrentItem={this.setCurrentItem}/>
}

if(this.props.search_option_changed_reducer.index == 2){
    MediaFilesView = <JobsTable
        //items={this.props.list}
        selectedRows={this.props.selectedRows}
        authToken={this.props.auth_token}
        onRowSelection={this.onRowSelection}
        setCurrentItem={this.setCurrentItem}/>
}

if(this.props.search_option_changed_reducer.index == 3){
    MediaFilesView = <MediaFilesPage
        //items={this.props.list}
        selectedRows={this.props.selectedRows}
        authToken={this.props.auth_token}
        onRowSelection={this.onRowSelection}
        setCurrentItem={this.setCurrentItem}/>
}



return (
    <div className={c.container}>
        <ReviewSearch
            assignIsOpen={this.state.assignIsOpen}
            toggleAssign={this.toggleAssign}
            selectedRows={this.props.selectedRows}
            onSubmitProcess={this.onSubmitProcess}
            toGroups={this.toGroups}
        />
        {MediaFilesView}
        <AddFileButton
            openFileUpload={this.openFileUpload.bind(this)}
            fileUploadIsOpen={this.state.fileUploadIsOpen}
        />
    </div>
)

}

ReviewTable.js

 componentWillMount = ()=> {
        var that = this;
    var settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://www.br.example.com//api/v1/workgroups/",
        "method": "GET",
        "headers": {
            Authorization: "Token " + that.props.token_Reducer.token
        },
        success: function( response, textStatus, jQxhr ){
            var settings_second = {
                "async": true,
                "crossDomain": true,
                "url":  response.results[0].url + "tagging_jobs/",
                "method": "GET",
                "headers": {
                    Authorization: "Token " + that.props.token_Reducer.token
                },
                success: function( data, textStatus, jQxhr ){
                    //that.setState({MediaFiles: data})
                    that.props.MediaFilesChangeAction(data, response.results[0].url + "tagging_jobs/")
                    //console.log(that.state.MediaFiles)
                },
            }
            $.ajax(settings_second).done((response) => {
                //alert("yo");

            });
        },
    }


    $.ajax(settings).done((response) => {
        //alert("yo");
        console.log('check');
    });


}



render(){
        return (
            <Table
                height='600px'
                ref={(el)=> this.table_el = el }
                fixedHeader={true}
                multiSelectable={true}
                onRowSelection={this.props.onRowSelection}>
                <TableHeader
                    className='table-header'
                    style={{fontFamily: 'montserratregular'}}
                    adjustForCheckbox={true}>
                    <TableRow className='table-header-row' style={{height:'10'}}>
                        <TableHeaderColumn  className='th-filename'> Filename </TableHeaderColumn>
                        <TableHeaderColumn> Channel </TableHeaderColumn>
                        <TableHeaderColumn> File Type </TableHeaderColumn>
                        <TableHeaderColumn> Uploaded </TableHeaderColumn>
                        <TableHeaderColumn> TX Date </TableHeaderColumn>
                        <TableHeaderColumn> Process </TableHeaderColumn>
                        <TableHeaderColumn> Assigned </TableHeaderColumn>
                        <TableHeaderColumn> Status </TableHeaderColumn>
                    </TableRow>
                </TableHeader>
                <TableBody
                    showRowHover={true}
                    deselectOnClickaway={false}>
                    {
                        this.props.media_file_store.MediaFiles.map((item,i)=> (
                            <TableRow
                                key={i}
                                className={`table-item-${i}`}
                                selected={this.props.selectedRows.includes(i)}>
                                <TableRowColumn className='td-filename' onMouseUp={this.showVideo(item.video.file, item.video.id, item.video.title, item.video.duration, item.video.height, item.video.width, item.video.frame_rate)}>
                                    <div className='item-file-details'>
                                        <div className='file-image' style={{backgroundImage: `url('${item.video.poster.list_thumbnail}')`}}/>
                                        <div className='details'>
                                            <p className='detail-name'> {item.video.title} </p>
                                            <p className='detail-type'>{this.secondsToHms(item.video.duration)}  </p>
                                        </div>
                                    </div>
                                </TableRowColumn>
                                <TableRowColumn>
                                    <p className="file-channel">kampe</p>
                                </TableRowColumn>
                                <TableRowColumn>
                                    <p className="file-duration">Movie </p>
                                </TableRowColumn>
                                <TableRowColumn>
                                    <p className="file-upload-date">{item.video.created_on}</p>
                                </TableRowColumn>
                                <TableRowColumn>
                                    <p className="file-tx-date">20-02-17</p>
                                </TableRowColumn>
                                <TableRowColumn className='process-column'>  </TableRowColumn>
                                <TableRowColumn>
                                    <p className="file-assignee">Apurv</p>
                                </TableRowColumn>
                                <TableRowColumn
                                    className={this.getStatusClassName(item.job_status)}>
                                    {this.jobStatus(item.job_status)}
                                </TableRowColumn>
                            </TableRow>
                        ))
                    }
                </TableBody>
            </Table>
        )
    }

只有一个ajax被执行。在我的网络表中，MediaFilesPage的ajax被执行，也没有在那里呈现视图。

并行ajax调用父组件的不同组件

0 个答案: