資訊專欄INFORMATION COLUMN
摘要：可是當(dāng)我們改變已存在數(shù)組項(xiàng)的屬性時(shí)，會(huì)發(fā)現(xiàn)視圖并不會(huì)如你希望的那樣更新，類似代碼如下當(dāng)我們修改并結(jié)果發(fā)現(xiàn)我們的視圖并沒(méi)有如期改變。我的解決辦法是，只替換被改動(dòng)的數(shù)組項(xiàng)，并且暫時(shí)不更新，當(dāng)并非同步完成后再更新，代碼如下不當(dāng)之處請(qǐng)指正，謝謝
當(dāng)我們使用react native的ListView.DataSource來(lái)提供高性能的數(shù)據(jù)處理和訪問(wèn)?？墒钱?dāng)我們改變已存在數(shù)組項(xiàng)的屬性時(shí)，會(huì)發(fā)現(xiàn)視圖并不會(huì)如你希望的那樣更新，類似代碼如下
export default class extends Component {
dataSource = [
{foo: "bar", active: false},
{foo: "zoo", active: false}
]
ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }))
constructor(props) {
this.state = {
lists: this.ds.cloneWithRows(this.dataSource)
}
......
當(dāng)我們修改dataSource[0].active = true, 并setState,結(jié)果發(fā)現(xiàn)我們的視圖并沒(méi)有如期改變。在網(wǎng)上找了一圈，說(shuō)粗暴的替換整個(gè)dataSource之類的，結(jié)果發(fā)現(xiàn)根本木有效果，r1還是老老實(shí)實(shí)的等于r2，原因的話等我看看源碼在過(guò)來(lái)寫一下。
我的解決辦法是，只替換被改動(dòng)的數(shù)組項(xiàng)，并且暫時(shí)不更新dataSource，當(dāng)setState(并非同步)完成后再更新，代碼如下：
let temp = this.dataSource.map(row => row.foo === "bar" ? Object.assign({}, row, {active: true} : row))
this.setState({lists: this.ds.cloneWithRows(temp)}, ()=>{this.dataSource = temp})
不當(dāng)之處請(qǐng)指正，謝謝
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/107135.html
摘要：分別命名文件為和。上述代碼指定了當(dāng)某列書籍被點(diǎn)擊時(shí)響應(yīng)一個(gè)回調(diào)函數(shù)。當(dāng)組件的值改變時(shí)例如用戶鍵入一些文本，將會(huì)調(diào)用組件，同時(shí)為組件指定一個(gè)回調(diào)函數(shù)。在調(diào)用時(shí)，回調(diào)函數(shù)和利用用戶輸入的數(shù)據(jù)將設(shè)置和屬性。 【編者按】本篇文章的作者是 Joyce Echessa——渥合數(shù)位服務(wù)創(chuàng)辦人，畢業(yè)于臺(tái)灣大學(xué)，近年來(lái)專注于協(xié)助客戶進(jìn)行 App 軟體以及網(wǎng)站開(kāi)發(fā)。本篇文章中，作者介紹通過(guò) React N...
摘要：承接上文基礎(chǔ)練習(xí)指北一，我們來(lái)看看如果通過(guò)接口獲取線上數(shù)據(jù)并展示。如果使用無(wú)法刷新效果，請(qǐng)檢查的權(quán)限設(shè)置。會(huì)在組件加載完成后，使用方法發(fā)送請(qǐng)求，并且只發(fā)送一次。牢記在最后要使用，否則不會(huì)出現(xiàn)錯(cuò)誤提示。下一步在返回的對(duì)象中添加空的。 承接上文《React Native 基礎(chǔ)練習(xí)指北（一）》，我們來(lái)看看React Native如果通過(guò)接口獲取線上數(shù)據(jù)并展示。 Tips: 如果使用cm...
閱讀 2384·2021-11-23 09:51
閱讀 5854·2021-09-22 15:39
閱讀 3409·2021-09-02 15:15
閱讀 3560·2019-08-30 15:54
閱讀 2418·2019-08-30 15:53
閱讀 1460·2019-08-30 14:04
閱讀 2516·2019-08-29 18:33
閱讀 2482·2019-08-29 13:08
