scrollview分页加载本地列表数据，某页的最后一个数据会错乱渲染到列表最后

[suxiaoliang]

相关平台

H5

浏览器版本: 版本 113.0.5672.63（正式版本） (x86_64)
使用框架: React

复现步骤

import { View, ScrollView } from '@tarojs/components'
import { useEffect, useState, useRef } from 'react'

export default function TestPage() {

  const tempScrollTop = useRef(0)
  const [list, setList] = useState<number[]>([])
  const [pageList, setPageList] = useState<number[]>([])
  const [currentPage, setCurrentPage] = useState(1)
  useEffect(() => {
    let arr: number[] = []
    for (let i = 0; i < 10; i++) {
      arr.push(i)
    }
    setList(arr)

  }, [])

  useEffect(() => {
    requestData(currentPage)
  }, [currentPage, list])

  const requestData = async (page = 1) => {
    //分页逻辑
    if (pageList.length > 50) {
      return
    }
    let arr: number[] = []
    for (let i = pageList.length; i < pageList.length + 10; i++) {
      arr.push(i)
    }
    setPageList([...pageList, ...arr])
  }

  return (
    <ScrollView
      style={{ height: '100%' }}
      scrollY
      scrollWithAnimation
      scrollTop={tempScrollTop.current}
      lowerThreshold={20}
      pagingEnabled
      enhanced
      onScrollToLower={() => {
        setCurrentPage(currentPage + 1)
      }}
      onScroll={(event) => {
        tempScrollTop.current = event?.detail?.scrollTop
      }}
    >
      {
        pageList.map((item, index) => {
          return <View style={{ height: 100, backgroundColor: 'white' }} key={index}>{item}</View>
        })
      }
    </ScrollView>
  )
}

期望结果

分页数据按顺序加载

实际结果

某个数据错乱显示在列表最后

环境信息

 Taro CLI 3.6.2 environment info:
    System:
      OS: macOS 12.0.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.18.2 - /usr/local/bin/node
      npm: 6.14.15 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.14 => 3.6.14 
      @tarojs/components: 3.6.14 => 3.6.14 
      @tarojs/components-react: 3.6.14 => 3.6.14 
      @tarojs/plugin-framework-react: 3.6.14 => 3.6.14 
      @tarojs/plugin-html: 3.6.14 => 3.6.14 
      @tarojs/plugin-platform-alipay: 3.6.14 => 3.6.14 
      @tarojs/plugin-platform-h5: 3.6.14 => 3.6.14 
      @tarojs/plugin-platform-jd: 3.6.14 => 3.6.14 
      @tarojs/plugin-platform-qq: 3.6.14 => 3.6.14 
      @tarojs/plugin-platform-swan: 3.6.14 => 3.6.14 
      @tarojs/plugin-platform-tt: 3.6.14 => 3.6.14 
      @tarojs/plugin-platform-weapp: 3.6.14 => 3.6.14 
      @tarojs/react: 3.6.14 => 3.6.14 
      @tarojs/router: 3.6.14 => 3.6.14 
      @tarojs/runtime: 3.6.14 => 3.6.14 
      @tarojs/shared: 3.6.14 => 3.6.14 
      @tarojs/taro: 3.6.14 => 3.6.14 
      @tarojs/taro-h5: 3.6.14 => 3.6.14 
      @tarojs/webpack5-runner: 3.6.14 => 3.6.14 
      babel-preset-taro: 3.6.14 => 3.6.14 
      eslint-config-taro: 3.6.14 => 3.6.14 
      react: ^18.2.0 => 18.2.0 

[ZakaryCode]

可以使用 View 组件包裹一下

+      <View>
      {
        pageList.map((item, index) => {
          return <View style={{ height: 100, backgroundColor: 'white' }} key={index}>{item}</View>
        })
      }
+      </View>

后续版本修复