本篇內(nèi)容主要講解“antd-mobile ListView長列表的數(shù)據(jù)更新時常見問題”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“antd-mobile ListView長列表的數(shù)據(jù)更新時常見問題”吧!

成都創(chuàng)新互聯(lián)公司主營海拉爾網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件開發(fā),海拉爾h5重慶小程序開發(fā)搭建,海拉爾網(wǎng)站營銷推廣歡迎海拉爾等地區(qū)企業(yè)咨詢

遇到的問題

listView這個組件我真的是看文檔看得腦殼疼。好不容易看文檔寫完長列表數(shù)據(jù)展示了。然后遇到一個需求，即用戶有一個點(diǎn)贊操作，問題出現(xiàn)了，點(diǎn)贊完數(shù)據(jù)更新之后listView不刷新列表。

解決列表不刷新問題

官方的demo里有這么一個函數(shù) rowHasChanged ,這個函數(shù)返回true或者false，如果是true，則認(rèn)為這行數(shù)據(jù)改變了，然后刷新這行數(shù)據(jù)，也就更新了列表。

// 官方
 constructor(props) {
  super(props);
  ...
  const dataSource = new ListView.DataSource({
   ...
   rowHasChanged: (row1, row2) => row1 !== row2 // 這個方法
  });
 }

然后就各種百度，最后在github上看到這個 issue。最后大家得出的結(jié)論就是如果要繼續(xù)用這個組件，又想刷新列表的話就只能寫成下面這樣。

but,這樣寫會讓所有的數(shù)據(jù)都更新，對性能的消耗挺大的。

// !!!這樣寫
rowHasChanged: ( row1, row2) => true

emmm,但是我不想去看其他的插件了，所以就采用了上面的寫法。

下面就講一下我怎么配置這個listView的，因?yàn)槲矣X得這個組件官方demo還真的寫得蠻看不懂的。

ListView在實(shí)際項(xiàng)目中使用

下面的代碼主要展示怎么配置listview，不要扣小地方，因?yàn)槲野押芏鄻I(yè)務(wù)代碼去掉了。

class Message extends React.Component {
 constructor(props) {
  super(props);
  const dataSource = new ListView.DataSource({
  // 這樣寫，每次都執(zhí)行rowHasChanged,每次都更新row
   rowHasChanged: ( row1, row2) => true
  });

  this.state = {
   dataSource,
  };
 }

 componentDidMount() {
  // 請求初始化數(shù)據(jù)
 }

 // 在這里維護(hù)長列表數(shù)據(jù)，把從接口獲取來的數(shù)據(jù)賦值給state里的dataSource。
 componentWillReceiveProps(nextProps) {
  if(nextProps.message.commentList !== this.props.message.commentList){
   this.setState({
   // 注意！這里的cloneWithRows()，antd里規(guī)定用它來更新dataSource，這個不是拼接數(shù)據(jù)，用這個函數(shù)，dataSource會更新成nextProps.message.commentList。
   //所以在接受后端分頁數(shù)據(jù)時，就把拼接好的數(shù)據(jù)賦值給nextProps.message.commentList（這個在model.js里寫了）
    dataSource: this.state.dataSource.cloneWithRows(nextProps.message.commentList),
   });
  }
 }

// onEndReached,列表被滾動到距離最底部不足`onEndReachedThreshold`個像素的距離時調(diào)用
// 在這里寫分頁請求
 onEndReached = (event) => {
  const { dispatch } = this.props;
  const { email } = this.props.user;
  const { pageNum, pageSize, contentId, totalCount, commentList } = this.props.message;
  
  let hasMore = totalCount > commentList.length ? true : false;
  // load new data
  // hasMore: from backend data, indicates whether it is the last page, here is false
  if (!hasMore) {
   return;
  }
  dispatch({
   type: "message/updateStates",
   payload: {
    pageNum: pageNum+1,
    isLoading: true,
    isLongList: true
   }
  })
  setTimeout(() => {
   dispatch({
    type: "message/getCommentsByContentId",
    payload: {
     contentId,
     identity: email, 
     pageNum: pageNum+1,
     pageSize
    }
   })
  }, 1000);
 }

 render() {
 // 列表的item
  const row = (rowData, sectionID, rowID) => {
   const item = rowData;
   return (
    <div className={styles.item} key={rowID}>
      <div onClick={toggleLike}>點(diǎn)贊</div>
      <div className={styles.content}>{item.content}</div>
      </div>
    </div>
   );
  };

  return (
   <Fragment>
     <ListView
     ref={el => this.lv = el}
     dataSource={this.state.dataSource}
     renderHeader={() => (
      <div className={styles.sub}>
       <span>列表頭，什么寫點(diǎn)什么</span>
      </div>
     )}
     renderFooter={() => (<div style={{ padding: 10, textAlign: 'center' }}>
      { isLoading ? '加載中' : '加載完畢'}
     </div>)}
     renderRow={row}
     className="am-list"
     pageSize={pageSize}
     useBodyScroll
     scrollRenderAheadDistance={500}
     onEndReached={this.onEndReached}
     onEndReachedThreshold={10}
    />
   </Fragment>
  );
 }
}

model.js

*getCommentsByContentId({ payload }, { call, put, select }) {
   const { data } = yield call(getCommentsByContentId, payload);
   const { message } = yield select(state=>state);
   const { commentList } = message;
   if (data.code === 200) {
    // 長列表，上一次頁的數(shù)據(jù)+這次的數(shù)據(jù)，賦值給新的commentList
    let list = [...commentList, ...data.data.list]
    yield put({
     type: 'updateStates',
     payload: {
      totalCount: data.data.totalCount,
      commentList: list
     }
    });
   } else {
    Toast.fail(data.msg, 1)
   }
  },

到此，相信大家對“antd-mobile ListView長列表的數(shù)據(jù)更新時常見問題”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞標(biāo)題：antd-mobileListView長列表的數(shù)據(jù)更新時常見問題-創(chuàng)新互聯(lián)
新聞來源：http://chinadenli.net/article26/cdopjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站導(dǎo)航、ChatGPT、網(wǎng)站收錄、網(wǎng)站設(shè)計(jì)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)