0
我目前在項目中使用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>
)
}
}
嗨感謝您的回覆......我試着用上面的代碼..但仍然沒有發生按鈕點擊後重新呈現。 –