标签：mobile JSON state dataSource 组件 antd listView

笔者上个礼拜开发公司移动端，由于数据过多所以要进行懒加载。于是就用到了antd的antd-mobile的listView组件。但是遇到了很多坑，今天总结出来分享给大家。

一：数据已经全部展示了却还是重复渲染。

原因：
自己太二，在componentWillReceiveProps 里面做了俩个判断执行了俩次下面的这个代码。所以导致数据很少可是一直向下滚会一直重新clone数据。

this.setState({
  dataSource: this.state.dataSource.cloneWithRows(nextProps.nky.waitCheckData),
  isLoading: false,
});

解决办法：
删掉一个就好了。

二：不触发onScroll事件

原因：
我这边的原因是因为使用了listView组件的useBodyScroll属性，但是在listView组件的外层我又放了一个其他的元素，所以导致onScroll事件失效。

解决办法：
把外层元素去掉

如果你想要外层的元素，那就不要加useBodyScroll。但是效果就是listView只会在你的外层元素上有scroll事件了。

小总结：如果使用useBodyScroll属性在listView组件的外面就不要在放其他的元素。否则onScroll事件会失效。

三：我给每一个row加了一个复选框，复选框的选择状态是根据state去判断的，我的row = (rowData, sectionID, rowID) => { // my code }是写在了render里面的。每次更改state都会触发render，可是row = (rowData, sectionID, rowID) => { // my code }这个代码并没有执行。

原因:
antd-mobile对此做了性能优化，并不是每次render都会触发此方法。

解决方法：
在你每次更改state的时候把dataSource也重新赋值，如下代码：

this.setState({
  selectedIds: newSelectedIds,
  dataSource: this.state.dataSource.cloneWithRows(JSON.parse(JSON.stringify(newDataSource))),
});

注意：一定要将你的newDataSource进行JSON.parse(JSON.stringify(newDataSource))处理。

如果朋友们遇到更多的坑了请在下方评论，笔者如果也遇到过会告诉你解决方案，如果没遇到过会陪你一起踩坑~

标签：mobile,JSON,state,dataSource,组件,antd,listView
来源： https://blog.51cto.com/u_15275953/2924539

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。