Question

我目前正在为项目使用ReactJs，我有按钮，当点击按钮时，有api调用，应该渲染组件。

但截至目前，使用ComponentDidMount（）没有发生，使用ComponentWillMount（）检查结果是相同的。

如果我错过任何东西，任何人都可以告诉我吗？

代码：

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>
            )
    }
}

Answer 1

如果this.getListCarrier();取决于所设置的完整状态，也许您可以将此调用移至componentDidMount()。这种方式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();
}

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

1 个答案: