需求:刪除列表中的某一項,但不刷新整個頁面,底下的數據順勢而上(第一張是原始數據,第二張是刪除掉“你會介今年”這條動態后顯示的數據)。
中間的過程比較曲折,只因為剛開始的時候自己只想着實現功能,卻沒考慮到適應之前版本原有的效果,於是就有了三個版本的實現方法:
let listdata = await deldata(item.id);//請求刪除接口返回的數據
let list = this.state.list;//原有列表數據
let newlist = new Array();//fsdfks 為空數組,存放刪除后剩下的數據組成的新數據
this.setState({ list: newlist });//list為動態列表的數據集合,重新賦值
①版本一:
this.setState({ list: newlist });//list為動態列表的數據集合,重新賦值 //在循環中使用setState賦值,總是導致頁面一閃一閃,不穩定
②版本二
//調用刪除接口直接返回后再調用刷新頁面的方法,導致的后果就是真個頁面都刷新了,與之前要求的刪除某一條數據只是讓它在動態列表消失不見(並非刷新整個頁面)的願景背道而馳
Refresh ===>為全局函數,刷新整個頁面的作用。
③版本三
//使用js中的splice方法,並把賦值一句放在整個循環的外層
縱覽:經過一番波折最終實現了需求,雖然沒能一次到位,但依舊從中學到了點。