Api 如何为异步调用重新呈现react组件？

我目前正在项目中使用ReactJs， 我有一个按钮，当点击按钮时，有api调用，组件应该被呈现

但到目前为止，使用ComponentDidMount（）检查ComponentWillMount（）并没有发生这种情况。结果是一样的

如果我遗漏了什么，有人能告诉我吗

代码：

从“React”导入React；
导入“/AddCarrier.css”
从“反应模式库”导入{DataTable，Alert，Loader}；
从“axios”导入axios；
导出默认类AddCarrier扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={tableContent:{}，tableContentAdd:{}，carrier:{}，responseCarrierList:{}，tableContentEdit:{}，carrierResponse:{}，agentName:，agentType:，error:，ntID:，producerNumber:，ux:“normal”}
this.getList=this.getList.bind（this）
this.addCarrier=this.addCarrier.bind（this）
this.editcharrier=this.editcharrier.bind（this）
this.getListCarrier=this.getListCarrier.bind（this）；
}
getList（）{
让载波={}；
让responseCarrierList={}；
变量agentName、agentType、ntID、producerNumber；
常量url=http://localhost:9001/carriers';
axios.post（url{
ntId:“xxxxxx”
})
。然后（rsp=>{
如果（rsp！=未定义）{
agentName=rsp.data.agentDetails[0]。agentName；
agentType=rsp.data.agentDetails[0].agentType；
ntID=rsp.data.agentDetails[0].ntID；
producerNumber=rsp.data.agentDetails[0]。producerNumber；
开利=rsp.data.carrier；
responseCarrierList=rsp.data.responseCarrierList；
this.setState（{carrier:carrier，responseCarrierList:responseCarrierList，agentName:agentName，agentType:agentType，ntID:ntID，producerNumber:producerNumber}）；
这个.getListCarrier（）；
}
})
}
组件willmount（）{
这个.getList（）；
}
getListCarrier（）{
var addObj={tableBody:[]}；
var editObj={tableBody:[]}；
var addcarrierray=[]
this.state.carrier.forEach（carrierad=>{
if（this.state.responseCarrierList.filter（（filterCarrier）=>filterCarrier.CARRIER\u NAIC\u CD==carrierAdd.CarrierInicCD）。长度==0）{
addcarrieray.push（carrierAdd）}
})
var carrierDetails=this.state.carrier；
/////////////添加载体组件////////////
addCarrierArray.map（承运人=>{
变量元素={}
elements.CarrierName=carrier.vendorNm+“-”+carrier.carrierniaccd；
elements.UserName=this.uname=user}type=“text”id=“uname”placeholder=“enter UserName”className=“c-form-field_uuinput”数据id={carrier.carrierniccd}/>；
elements.Password=this.Password=pass}type=“Password”id=“pass”placeholder=“enter Password”className=“c-form-field\uu input”/>；
元素。操作=添加；
elements.SignUp=；
addObj.tableBody.push（元素）}）
/////////////编辑载体组件////////////
this.state.responseCarrierList.map（载波=>{
var元素={}；
elements.CarrierName=此.state.carrier.filter（（carrierFilter）=>carrierFilter.CarrierNicCD==carrier.carrier\u NAIC\u CD）[0]。供应商M+“-”+carrier.carrier\u NAIC\u CD；
elements.UserName=this.uname=user}type=“text”id=“uname”defaultValue={carrier.UserName}readOnly className=“c-form-field_uuuinput”数据id={carrier.carrier_NAIC_CD}/>；
elements.Password=this.Password=pass}type=“Password”id=“pass”defaultValue=“********”readOnly className=“c-form-field_uuinput”/>；
元素。动作=编辑；
addObj.tableBody.push（元素）
})
this.setState（{tableContentAdd:addObj，tableContentEdit:editObj}）；
}
addCarrier（事件）{
const username=event.target.parentElement.parentElement.querySelector（“#uname”）.value；
const password=event.target.parentElement.parentElement.querySelector（“#pass”）.value；
const carrierName=event.target.parentElement.parentElement.childNodes[0]。innerText
const naic=event.target.parentElement.parentElement.querySelector（“#uname”）.getAttribute（“数据id”）；
如果（用户名==“”）
this.setState（{错误：“需要用户名”}）；
否则{
此.setState（{错误：}）；
常量url=http://localhost:9001/carriers/carrierUpdate';
axios.post（url{
producerNumber:this.state.producerNumber，
networkId:this.state.ntID，
userId:username，
密码：密码，
naicCode:naic
})。然后（rsp=>{
});
}
}
编辑载体（事件）{
开关（event.target.parentElement.parentElement.querySelector（“#编辑”）.innerText）{
案例“编辑”：
event.target.parentElement.parentElement.querySelector（“#uname”）.removeAttribute（“只读”）
event.target.parentElement.parentElement.querySelector（“传递”）.removeAttribute（“只读”）
event.target.parentElement.parentElement.querySelector（“#编辑”）.innerText=“添加”
打破
案例“添加”：
const username=event.target.parentElement.parentElement.querySelector（“#uname”）.value；
const password=event.target.parentElement.parentElement.querySelector（“#pass”）.value；
event.target.parentElement.parentElement.querySelector（“#uname”）.setAttribute（“只读”，true）
event.target.parentElement.parentElement.querySelector（“#pass”）.setAttribute（“只读”，true）
event.target.parentElement.parentElement.querySelector（“#编辑”）.innerText=“编辑”
此.addCarrier（事件）
import React from 'react';
import "./AddCarrier.css"
import {DataTable,Alert,Loader} from 'react-pattern-library';

import axios from 'axios';

export default class AddCarrier extends React.Component{
    constructor(props){
        super(props);
        this.state={tableContent:{},tableContentAdd:{},carrier:{},responseCarrierList:{},tableContentEdit:{},carrierResponse:{},agentName:"",agentType:"",error:"",ntID:"",producerNumber:"",ux:"normal"}
        this.getList = this.getList.bind(this)
        this.addCarrier = this.addCarrier.bind(this)
        this.editCarrier = this.editCarrier.bind(this)
        this.getListCarrier = this.getListCarrier.bind(this);
    }

    getList(){
        let carrier={};
        let responseCarrierList={};
        var agentName,agentType,ntID,producerNumber;

        const url = 'http://localhost:9001/carriers';
        axios.post(url,{
            ntId:"xxxxxx"
        })
            .then(rsp => {
                if(rsp!=undefined){
                agentName = rsp.data.agentDetails[0].agentName;
                agentType = rsp.data.agentDetails[0].agentType;
                ntID=rsp.data.agentDetails[0].NTID;
                producerNumber=rsp.data.agentDetails[0].ProducerNumber;
                carrier=rsp.data.carrier;
                responseCarrierList=rsp.data.responseCarrierList;
                this.setState({carrier:carrier,responseCarrierList:responseCarrierList,agentName: agentName, agentType: agentType,ntID:ntID,producerNumber:producerNumber}); 
                this.getListCarrier();
            }
        })

    }
    componentWillMount(){
        this.getList();
    }

    getListCarrier(){
        var addObj={tableBody:[]};
        var editObj={tableBody:[]};
        var addCarrierArray = []
        this.state.carrier.forEach(carrierAdd => {
        if(this.state.responseCarrierList.filter( (filterCarrier) => filterCarrier.CARRIER_NAIC_CD == carrierAdd.carrierNaicCd).length == 0){
            addCarrierArray.push(carrierAdd)} 
        })
        var carrierDetails = this.state.carrier;
        /////////////Add Carrier Component////////////
        addCarrierArray.map(carrier =>{
            var elements = {}
            elements.CarrierName = carrier.vendorNm + " - " + carrier.carrierNaicCd;
            elements.UserName = <input ref={user=> this.uname = user} type="text" id="uname" placeholder="enter username" className="c-form-field__input" data-id={carrier.carrierNaicCd}/>;
            elements.Password = <input ref={pass=> this.password = pass} type="password" id="pass" placeholder="enter password " className="c-form-field__input"/>;
            elements.Action =<button className="c-btn c-btn--secondary c-btn--sm" type="submit" onClick={this.addCarrier}>Add</button>;
            elements.SignUp = <a href={carrier.signupUrl} target="_blank">SignUp</a>;
            addObj.tableBody.push(elements)})

        /////////////Edit Carrier Component////////////
        this.state.responseCarrierList.map(carrier =>{
            var elements = {};
            elements.CarrierName = this.state.carrier.filter( (carrierFilter) => carrierFilter.carrierNaicCd == carrier.CARRIER_NAIC_CD)[0].vendorNm + " - " + carrier.CARRIER_NAIC_CD;             
            elements.UserName = <input ref={user=> this.uname = user} type="text" id="uname" defaultValue = {carrier.USERNAME} readOnly className="c-form-field__input" data-id={carrier.CARRIER_NAIC_CD}/>;
            elements.Password = <input ref={pass=> this.password = pass} type="password" id="pass" defaultValue = "******" readOnly className="c-form-field__input"/>;
            elements.Action =<button className="c-btn c-btn--secondary c-btn--sm" type="submit" onClick={this.editCarrier} id="edit">edit</button>;
            addObj.tableBody.push(elements)
            })
        this.setState({tableContentAdd: addObj,tableContentEdit:editObj});
    }

    addCarrier(event){
        const username=event.target.parentElement.parentElement.querySelector("#uname").value;
        const password=event.target.parentElement.parentElement.querySelector("#pass").value;
        const carrierName = event.target.parentElement.parentElement.childNodes[0].innerText
        const naic = event.target.parentElement.parentElement.querySelector("#uname").getAttribute("data-id");
        if(username=="")
            this.setState({error:"Username is required"});
        else{
            this.setState({error:""});
            const url = 'http://localhost:9001/carriers/carrierUpdate';
            axios.post(url,{
                    producerNumber: this.state.producerNumber,
                    networkId: this.state.ntID,
                    userId:username,
                    password: password,
                    naicCode: naic
                  }).then(rsp => {
                    });
                }
        }

    editCarrier(event){
        switch(event.target.parentElement.parentElement.querySelector("#edit").innerText){
            case "edit":  
                event.target.parentElement.parentElement.querySelector("#uname").removeAttribute("readOnly")
                event.target.parentElement.parentElement.querySelector("#pass").removeAttribute("readOnly")
                event.target.parentElement.parentElement.querySelector("#edit").innerText = "add"
                break;

            case "add":
                const username=event.target.parentElement.parentElement.querySelector("#uname").value;
                const password=event.target.parentElement.parentElement.querySelector("#pass").value;
                event.target.parentElement.parentElement.querySelector("#uname").setAttribute("readOnly",true)
                event.target.parentElement.parentElement.querySelector("#pass").setAttribute("readOnly",true)
                event.target.parentElement.parentElement.querySelector("#edit").innerText = "edit"
                this.addCarrier(event) 
                break;             
        }        
    }
    render(){
        return (
                <div className="carrierDashboard">
                    <div className="add-carrier">
                        {(this.state.agentName!=""?<h3 className="welcome-heading">Welcome {this.state.agentName} ({this.state.agentType})</h3>:<h3/>)}
                        {(this.state.error) ? <Alert type="alert">{this.state.error}</Alert> : <span></span>}
                        {(this.state.tableContentAdd["tableBody"]!=undefined)?<DataTable data={this.state.tableContentAdd} sortable={true} className="c-table--simple"/>:<Loader />}
                    </div>                    
                </div>
            )
    }
}

getList(){
    let carrier={};
    let responseCarrierList={};
    var agentName,agentType,ntID,producerNumber;
    const url = 'http://localhost:9001/carriers';
    axios.post(url,{
        ntId:"xxxxxx"
    })
        .then(rsp => {
            if(rsp!=undefined){
            agentName = rsp.data.agentDetails[0].agentName;
            agentType = rsp.data.agentDetails[0].agentType;
            ntID=rsp.data.agentDetails[0].NTID;
            producerNumber=rsp.data.agentDetails[0].ProducerNumber;
            carrier=rsp.data.carrier;
            responseCarrierList=rsp.data.responseCarrierList;   
                  this.setState({carrier:carrier,responseCarrierList:responseCarrierList,agentName: agentName, agentType: agentType,ntID:ntID,producerNumber:producerNumber}, () => this.getListCarrier() ); 
        }
    })
}

getList(){
    let carrier={};
    let responseCarrierList={};
    var agentName,agentType,ntID,producerNumber;

    const url = 'http://localhost:9001/carriers';
    axios.post(url,{
        ntId:"xxxxxx"
    })
        .then(rsp => {
            if(rsp!=undefined){
            agentName = rsp.data.agentDetails[0].agentName;
            agentType = rsp.data.agentDetails[0].agentType;
            ntID=rsp.data.agentDetails[0].NTID;
            producerNumber=rsp.data.agentDetails[0].ProducerNumber;
            carrier=rsp.data.carrier;
            responseCarrierList=rsp.data.responseCarrierList;
            this.setState({carrier:carrier,responseCarrierList:responseCarrierList,agentName: agentName, agentType: agentType,ntID:ntID,producerNumber:producerNumber}); 
        }
    })

}
componentWillMount(){
    this.getList();
}
componentDidMount(){
    this.getListCarrier();
}