ScrollView 存在 children 错乱的问题

[ickg5]

相关平台

H5

复现仓库

https://github.com/taroify/taro339-maprender.git
浏览器版本: Chrome/93.0.4577.82 Safari/537.36
使用框架: React

复现步骤

ScrollView 存在 children 错乱的问题

当 ScrollView children 是一个由 View 包裹的组件数组，在同时更新组件数组和 scrollLeft 会存在子数组内部排序混乱的问题。

代码如下：

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

export default function Index() {
  const [index, setIndex] = useState(0)
  const [nodes, setNodes] = useState([1])
  const [scrollLeft, setScrollLeft] = useState(0)

  useEffect(() => {
    if (index === 1) {
      setScrollLeft(1)
    }
  }, [index])

  return (
    <View className='index'>
      <Button onClick={() => {
        setNodes([1, 2])
        setIndex(1)
      }}
      >
        改变
      </Button>
      <ScrollView
        scrollX
        scrollWithAnimation
        scrollLeft={scrollLeft}
      >
        <View>
          {
            //
            nodes.map(node => <View key={node} className={`node-${node}`}>{node}</View>)
          }
        </View>
      </ScrollView>
    </View>
  )
}

nodes 的顺序是 1,2 但是当改变 scrollLeft 值以后出现顺序错乱为 2,1。

期望结果

nodes 的顺序是 1,2

实际结果

nodes 的顺序是 2,1

环境信息

� Taro v3.3.9


  Taro CLI 3.3.9 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.17.1 - C:\Programs\nodejs\node-v14.17.1-win-x64\node.EXE
      Yarn: 1.22.11 - C:\Programs\nodejs\node\yarn.CMD
      npm: 6.14.13 - C:\Programs\nodejs\node-v14.17.1-win-x64\npm.CMD

[ickg5]

@Chen-jj 大佬，这个 bug 比较紧急，是组件库里面发现的。希望能帮忙修复一下。

[ickg5]

@luckyadam @zhiqingchen @iChengbo 这个问题啥时候能解决下，大佬们。

[tiankongoyll]

我也遇到了，回到顶部内容顺序错乱了

[ickg5]

@Chen-jj 大佬，这个bug麻烦看一下。

[Chen-jj]

@tgioer @tiankongoyll 的确存在这个问题，感觉是 React 结合使用 Stencil 时，Stencil 的 <slot> 导致的问题。但我翻阅了 Stencil 的 slot 相关的 issues 也没能找到类似的问题。。重新编写一个 Stencil 组件项目（直接使用而没有通过 React）也复现不了。

无意中发现每个 Stencil 组件都有一些 Comment 节点，把它们都去除了就能避免上述问题。

猜测 Comment 节点用于处理 slot 的 diff，而在我们这种情况下出现了该问题。

我提交了一个 PR，尝试在 View 组件每次渲染后，清除内部的 Comment 节点：https://github.com/NervJS/taro/pull/10510/files

各位可以拉取此分支，下载 Taro 项目源码，编译 @tarojs/components 包，然后 link 到本地项目使用，测试一下是否还有问题。如无问题，会跟下个 patch 版本发布。

[ickg5]

好滴大佬

[xiehui999]

H5 暂时先用 document.querySelector(#${id})?.scrollIntoView({ behavior: 'smooth', block: 'start' });
这种方式可以解决错乱问题， 这个错乱问题应该很久了