使用全新数据更新数组不会删除模板组件中先前呈现的数据

问题描述

我有一个包含一些数据的数组，在分页事件之后，我用数据的下一页更新了数组，因此它应该使用一组新数据更新视图，尽管它更新了上一组数据的视图仍然存在于 DOM 视图中，理想情况下它应该清除之前的视图并将新的数据集渲染到 DOM 中

import { Component,Element,h,Listen,Prop,State } from '@stencil/core'

@Component({
  tag: 'test-common-listing',styleUrl: 'test-common-listing.scss',shadow: true,})
export class TestCommonListing {
  @Element() el: HTMLElement

  @Prop() name: string
  @Prop() url: string
  @Prop() columns: any

  @State() list: Array<any> = []
  @State() page_number: number = 1
  @State() page_size: number = 5


  @Listen('pageChange')
  pageCanged(page) {
    this.page_number = page.detail
  }
  get filterList() {
    return this.list.slice((this.page_number - 1) * this.page_size,this.page_number * this.page_size)
  }
  async componentwillLoad() {
    console.log('component will load')
    const res = await fetch(this.url)
    const data = await res.json()
    this.list = data
  }
generateElement(item){
      
      let tr = []
      let cell = null
      let span = null
    
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['first_name']
      cell.appendChild(span)
      tr.push(cell)
      
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['last_name']
      cell.appendChild(span)
      tr.push(cell)
      
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['role_display_name']
      cell.appendChild(span)
      tr.push(cell)
      
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['avail_status_name']
      cell.appendChild(span)
      tr.push(cell)
      return tr
    }
  render() {
    return (
      <div class="test-common-listing">
        <div class="header">
          <slot name="header" />
        </div>
        <table class="fixed_headers">
          <thead>
            <tr>
              {JSON.parse(this.columns).map(c => <th>{c.label}</th>)}
            </tr>
          </thead>
          <tbody>
            {
              this.filterList.map(l => <tr ref={nodeEle => {
                nodeEle.append(...this.generateElement(l))
              }}> </tr>)
            }
          </tbody>
        </table>
        <div>
          <test-pagination />
        </div>
        <div class="footer">
          <slot name="footer" />
        </div>
      </div>
    )
  }
}

在表体中，它使用以前的数据集而不是新的数据集呈现更新的数据。

解决方法

由于元素是手动添加到 nodeEle 中的，因此在更新以下代码之前必须删除它。

<tbody>
            {
              this.filterList.map(l => <tr ref={nodeEle => {
                while (nodeEle.hasChildNodes()) {
                  nodeEle.firstChild.remove()
                }
                nodeEle.append(...this.generateElement(l))
              }}> </tr>)
            }
</tbody>