HarmonyOS 鸿蒙Next list组件在数据不更新的情况下如何重新渲染

发布于 1周前 作者 gougou168 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next list组件在数据不更新的情况下如何重新渲染

interface listType{
title: number;
titlename?:string
}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State messageSource: listType[] = [{title:1731053367168}]
@State isRefreshing: boolean = false;
static timeAgo(time:number): string {
if (!time || time == 0) return "";
const dateobj = new Date(time)
const year = dateobj.getFullYear()
const month = (dateobj.getMonth() + 1).toString().padStart(2, '0')
const date = dateobj.getDate().toString().padStart(2, '0')
const hours = dateobj.getHours().toString().padStart(2, '0')
const minutes = dateobj.getMinutes().toString().padStart(2, '0')

const today = new Date()

if (today.getTime() - time <= 1000*60) {
return '刚刚'
}

if (today.getTime() - time < 1000*60*60) {
return Math.floor(((today.getTime() - time) / 1000 / 60)) + "分钟前"
}

// xx:xx
if (today.getTime() - time < 1000*60*60*24 && today.getDate() === dateobj.getDate()) {
return hours+":"+minutes
}

// 昨天xx:xx
if (today.getTime() - time < 1000*60*60*48 && (
today.getDate() === 1?
new Date(today.getFullYear(), today.getMonth(), 0).getDate() === dateobj.getDate() : // 判断是不是最后一天
today.getDate() - dateobj.getDate() === 1)) // 判断日期相差1
{
return '昨天'+hours+":"+minutes
}

// xx月xx日
if (today.getFullYear() === dateobj.getFullYear()) {
return month+"月"+date+"日"
}
return year+"年"+month+"月"+date+"日"
};
build() {
RelativeContainer() {
Refresh({ refreshing: $$this.isRefreshing }) {
List() {
ForEach(this.messageSource, (item: listType, index: number) => {
ListItem() {
Row({ space: 10 }) {
Text('title')
Text(Index.timeAgo(item.title))
}
.width('100%')
.height(40)
.padding({ left: 10, right: 10 })
}
})
}
}
.onRefreshing(() => {
this.isRefreshing=false
})
.pullToRefresh(true)
Button('点击刷新').onClick((event: ClickEvent) => {

}).margin({top:100})

}
.height('100%')
.width('100%')
}
}
Harmonyos Next教程
2 回复

看下加了一个update标识。你看是否能满足

interface listType{
  title: number;
  titlename?:string
}
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) message: string = 'Hello World';
  [@State](/user/State) messageSource: listType[] = [{title:1731053367168}]
  [@State](/user/State) update:number= 0
  [@State](/user/State) isRefreshing: boolean = false;
  static timeAgo(time:number,update:number): string {
    if (!time || time == 0) return "";
    const dateobj = new Date(time)
    const year = dateobj.getFullYear()
    const month = (dateobj.getMonth() + 1).toString().padStart(2, '0')
    const date = dateobj.getDate().toString().padStart(2, '0')
    const hours = dateobj.getHours().toString().padStart(2, '0')
    const minutes = dateobj.getMinutes().toString().padStart(2, '0')
    const today = new Date()
    if (today.getTime() - time <= 1000*60) {
      return '刚刚'
    }
    if (today.getTime() - time < 1000*60*60) {
      return Math.floor(((today.getTime() - time) / 1000 / 60)) + "分钟前"
    }
    // xx:xx
    if (today.getTime() - time < 1000*60*60*24 && today.getDate() === dateobj.getDate()) {
      return hours+":"+minutes
    }
    // 昨天xx:xx
    if (today.getTime() - time < 1000*60*60*48 && (
      today.getDate() === 1?
        new Date(today.getFullYear(), today.getMonth(), 0).getDate() === dateobj.getDate() : // 判断是不是最后一天
        today.getDate() - dateobj.getDate() === 1)) // 判断日期相差1
    {
      return '昨天'+hours+":"+minutes
    }
    // xx月xx日
    if (today.getFullYear() === dateobj.getFullYear()) {
      return month+"月"+date+"日"
    }
    return year+"年"+month+"月"+date+"日"
  };
  build() {
    RelativeContainer() {
      Refresh({ refreshing: $$this.isRefreshing }) {
        List() {
          ForEach(this.messageSource, (item: listType, index: number) => {
            ListItem() {
              Row({ space: 10 }) {
                Text('title')
                Text(Index.timeAgo(item.title,this.update))
              }
              .width('100%')
              .height(40)
              .padding({ left: 10, right: 10 })
            }
          })
        }
      }
      .onRefreshing(() => {
        this.isRefreshing=false
      })
      .pullToRefresh(true)
      Button('点击刷新').onClick((event: ClickEvent) => {
        this.update++
      }).margin({top:100})
    }
    .height('100%')
    .width('100%')
  }
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

针对HarmonyOS 鸿蒙Next list组件在数据不更新的情况下如何重新渲染的问题，以下是一些解决方法：

  1. 使用setState更新数据：

    • 当list组件的数据源发生变化时，确保使用setState或相应的状态更新函数来更新数据。这可以触发组件的重新渲染。

  2. 复制并替换数组：

    • 如果直接修改数组中的对象导致页面不重新渲染，可以先复制一个临时的数组，修改临时数组中的值，然后将临时数组赋值给原数组。这是因为@State只是监听数组的地址值，只有地址值改变时才会重新渲染页面。

  3. 使用map方法：

    • 另一种方法是修改数据后，使用map方法遍历数组并返回一个新数组。由于返回了一个新数组，页面也会重新渲染。

  4. 触发刷新机制：

    • 对于支持下拉刷新的list组件，可以通过触发下拉刷新来强制重新渲染组件。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部