第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何在 React 應(yīng)用程序中呈現(xiàn)服務(wù)器響應(yīng)

如何在 React 應(yīng)用程序中呈現(xiàn)服務(wù)器響應(yīng)

富國(guó)滬深 2022-05-14 14:54:47
我正在嘗試從服務(wù)器獲取數(shù)據(jù),然后經(jīng)過(guò)一些解析,將其呈現(xiàn)在組件的表中。但問(wèn)題是服務(wù)器的響應(yīng)太晚了,我的表格沒(méi)有顯示。如何從服務(wù)器和模板同步我的數(shù)據(jù)?謝謝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貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個(gè)贊

您需要調(diào)用setState您的組件來(lái)顯示更改。this.state.builds.push(v[0]);不會(huì)觸發(fā)組件的更新。即使只是setState(this.state)在this.createChartObjects(groupedData)應(yīng)該工作之后。


此外,您的函數(shù)createChartObjects返回一個(gè)空數(shù)組,它可以返回一個(gè)您想要推送到您的狀態(tài)的圖表對(duì)象數(shù)組。


const chartObjects = this.createChartObjects(groupedData);

this.setState({

  builds: this.state.builds.concat(chartObjects)

});

setState() 將組件狀態(tài)的更改加入隊(duì)列,并告訴 React 該組件及其子組件需要使用更新的狀態(tài)重新渲染。這是您用來(lái)更新用戶界面以響應(yīng)事件處理程序和服務(wù)器響應(yīng)的主要方法。


@Src https://reactjs.org/docs/react-component.html#setstate


查看完整回答
反對(duì) 回復(fù) 2022-05-14
?
當(dāng)年話下

TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊

您遇到的問(wèn)題是在狀態(tài)更新后您沒(méi)有觸發(fā)另一個(gè)渲染。你可以通過(guò)調(diào)用 setState() 來(lái)改變狀態(tài),而不是改變狀態(tài)對(duì)象。

你需要做的就是改變這個(gè):

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

對(duì)此:

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


查看完整回答
反對(duì) 回復(fù) 2022-05-14
  • 2 回答
  • 0 關(guān)注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)