富國滬深
2022-05-14 14:54:47
我正在嘗試從服務器獲取數據,然后經過一些解析,將其呈現在組件的表中。但問題是服務器的響應太晚了,我的表格沒有顯示。如何從服務器和模板同步我的數據?謝謝class TFSBuilds extends React.Component { constructor(){ super(props); this.state = { builds: [] }; } componentDidMount() { AzureService.send("ObCloud").then((data)=>{ let groupedData = this.groupBy(data.value, obj => obj.definition.id) this.createChartObjects(groupedData) }); } createChartObjects(groupedRecords) { const arr = []; for (let [k, v] of groupedRecords) { if(v && k){ this.state.builds.push(v[0]); } } return arr; } render() { const { builds } = this.state if (builds.length <= 0) { return null } return ( <div className = "build-status" > <table className="table table-hover"> <thead> <tr> <th scope="col">By</th> <th scope="col">When</th> <th scope="col">Status</th> </tr> </thead> <tbody> { builds.map(el => <tr> <th scope="row">{el.requestedBy.displayName}</th> <td>{el.requestedBy.date}</td> <td>{el.requestedBy.status}</td> </tr>) } </tbody> </table> </div> ) }}
2 回答
慕尼黑8549860
TA貢獻1818條經驗 獲得超11個贊
您需要調用setState您的組件來顯示更改。this.state.builds.push(v[0]);不會觸發組件的更新。即使只是setState(this.state)在this.createChartObjects(groupedData)應該工作之后。
此外,您的函數createChartObjects返回一個空數組,它可以返回一個您想要推送到您的狀態的圖表對象數組。
const chartObjects = this.createChartObjects(groupedData);
this.setState({
builds: this.state.builds.concat(chartObjects)
});
setState() 將組件狀態的更改加入隊列,并告訴 React 該組件及其子組件需要使用更新的狀態重新渲染。這是您用來更新用戶界面以響應事件處理程序和服務器響應的主要方法。
@Src https://reactjs.org/docs/react-component.html#setstate
當年話下
TA貢獻1890條經驗 獲得超9個贊
您遇到的問題是在狀態更新后您沒有觸發另一個渲染。你可以通過調用 setState() 來改變狀態,而不是改變狀態對象。
你需要做的就是改變這個:
this.state.builds.push(v[0]);
對此:
this.setState({ builds: this.state.builds.concat(v[0]) });添加回答
舉報
0/150
提交
取消
