亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 React 應用程序中呈現服務器響應

如何在 React 應用程序中呈現服務器響應

富國滬深 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


查看完整回答
反對 回復 2022-05-14
?
當年話下

TA貢獻1890條經驗 獲得超9個贊

您遇到的問題是在狀態更新后您沒有觸發另一個渲染。你可以通過調用 setState() 來改變狀態,而不是改變狀態對象。

你需要做的就是改變這個:

this.state.builds.push(v[0]);

對此:

this.setState({ builds: this.state.builds.concat(v[0]) });


查看完整回答
反對 回復 2022-05-14
  • 2 回答
  • 0 關注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號