二十六、【鸿蒙 NEXT】LazyForeach没有刷新

【前言】

上一章我们介绍了@ObservedV2与LazyForeach结合实现动态刷新的效果，这里在上一章代码基础上给出一种场景，虽然LazyForeach中的generateKey变更了，但是列表还是没有刷新的情况。

1、结合Refresh组件实现下拉刷新

我们在展示列表数据时，经常会用到下拉列表刷新的功能，鸿蒙中对应的组件Refresh组件，代码如下：

2、从云测获取数据，并更新页面的状态列表数据

我们数据大多数情况都是从云测获取，而云测定义的一些id，一般都是Long类型，而鸿蒙中的number类型数据长度有限，如果数据过长，可能在将云测数据转为本地数据时，造成id被截断，因此我们经常会用@ohmos/json-bigint组件实现json转换，代码实现如下：

我们假设jsonStr是从云测请求到的数据，且其中的id是19位，因此我们做json转换需要用到json-bigint组件转换，且Message对象中的id定义为string类型，防止number类型接收被截断。注意这里我们json转换完成后，直接通过as转为了Message数据对象，并赋值给了LayForeach的dataSource实现列表的加载

aboutToAppear(): void {
    let jsonStr = '[{"id":1231231231231231246,"name":"张三","icon":""},{"id":1231231231231231247,"name":"张四","icon":""},{"id":1231231231231231248,"name":"张五","icon":""}]'
    this.dataSource.addItems(JsonBigInt.parse(jsonStr) as Message[])
  }

@ObservedV2
class Message {
  id:string = ''
  @Trace name:string = ''
  icon:ResourceStr = ''
}

3、下拉刷新实现

如下，我们在Refresh组件的onRefreshing属性中实现下拉刷新的操作，模拟从云测获取json数据，并转换为本地对象数组，重新赋值给lazyForeach组件的dataSource实现列表刷新：

我们可以看到，我们lazyForeach中的generateKey用的是Message的id字段，我们这里打印了id，在刷新逻辑中，我们新增了一个id的数据，并删除了最后一个数据，与aboutAppear中的数据对比，前后两个数据的id肯定是变了。那么我们下拉看下效果

Refresh({refreshing:this.refreshing}){
        List({space:10}) {
          LazyForEach(this.dataSource, (item:Message)=> {
            ListItem() {
              Row(){
                Image(item.icon || $r('app.media.touxiang1')).height(40).width(40)
                Text(item.name)
              }
            }
          }, (item:Message) => {
            console.log(`current id = ${item.id}`)
            return item.id
          })
        }
      }.onRefreshing(() => {
        this.refreshing = true
        setTimeout(() => {
          this.refreshing = false
          let jsonStr = '[{"id":1231231231231231241,"name":"张六","icon":""},{"id":1231231231231231246,"name":"张三","icon":""},{"id":1231231231231231247,"name":"张四","icon":""}]'
          this.dataSource.refreshItems(JsonBigInt.parse(jsonStr) as Message[])
        },2000)
      })

效果如下：

我们看下generateKey的打印，明显前后的id变了，但是为啥列表没刷新？

4、原因分析

（1）由于我们直接通过as转换类型，实际上即使我们Message中的id定义为string类型，实际还是bigInt数据

（2）LazyForeach组件在刷新前，会对generateKey的返回值类型做判断，如果不是string类型，就直接报错，不会刷新列表，这里和Foreach组件不同，Foreach组件不会做类型判断

5、解决方式

解决方案也很简单，就是将generateKey中的item.id改为item.id.toString()

效果如下：

完整的示例代码如下：DateSource代码参考上一章

import JsonBigInt from '@ohmos/json-bigint'
import { DateSource } from './DateSource'

@Entry
@ComponentV2
struct LazyForeachPage {
  @Local refreshing:boolean = false
  dataSource: DateSource<Message> = new DateSource()
  private index = 1

  aboutToAppear(): void {
    let jsonStr = '[{"id":1231231231231231246,"name":"张三","icon":""},{"id":1231231231231231247,"name":"张四","icon":""},{"id":1231231231231231248,"name":"张五","icon":""}]'
    this.dataSource.addItems(JsonBigInt.parse(jsonStr) as Message[])
  }

  build() {
    Column(){
      Button('ObservedV2刷新').onClick(() => {
        this.index++
        this.dataSource.getAllData().find(item => item.id === '3')!.name = `张${this.index}`
      })
      Button('原始刷新').onClick(() => {
        this.index++
        this.dataSource.changeData(2,{id:'3', name: `张${this.index}`, icon:$r('app.media.touxiang1')} as Message)
      })
      Refresh({refreshing:this.refreshing}){
        List({space:10}) {
          LazyForEach(this.dataSource, (item:Message)=> {
            ListItem() {
              Row(){
                Image(item.icon || $r('app.media.touxiang1')).height(40).width(40)
                Text(item.name)
              }
            }
          }, (item:Message) => {
            console.log(`current id = ${item.id}`)
            return item.id.toString()
          })
        }
      }.onRefreshing(() => {
        this.refreshing = true
        setTimeout(() => {
          this.refreshing = false
          let jsonStr = '[{"id":1231231231231231241,"name":"张六","icon":""},{"id":1231231231231231246,"name":"张三","icon":""},{"id":1231231231231231247,"name":"张四","icon":""}]'
          this.dataSource.refreshItems(JsonBigInt.parse(jsonStr) as Message[])
        },2000)
      })

    }
    .padding({left:32})
    .height('100%')
    .width('100%')
  }
}

@ObservedV2
class Message {
  id:string = ''
  @Trace name:string = ''
  icon:ResourceStr = ''
}