使用VirtualList 组件 滚动时报createSelectorQuery方法不存在的错误

[Rambos]

相关平台

H5

浏览器版本: chrome 90
使用框架: React

复现步骤

按照官网示例使用VirtualList组件， 渲染后滚动内容，就会报错_tarojs_taro__WEBPACK_IMPORTED_MODULE_0__.default.createSelectorQuery is not a function

import React, { Component } from 'react'
import { View} from '@tarojs/components'
import VirtualList from '@tarojs/components/virtual-list'
import './index.scss'
function buildData (offset = 0) {
  return Array(100).fill(0).map((_, i) => i + offset);
}

const Row = React.memo(({ id, index, style, data }) => {
  return (
    <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
      Row {index} : {data[index]}
    </View>
  );
})

export default class Index extends Component {
  state = {
    data: buildData(0),
  }

  render() {
    const { data } = this.state
    const dataLen = data.length
    return (
      <VirtualList
        height={500} /* 列表的高度 */
        width='100%' /* 列表的宽度 */
        itemData={data} /* 渲染列表�的数据 */
        itemCount={dataLen} /*  渲染列表的长度 */
        itemSize={100} /* 列表单项的高度  */
      >
        {Row}
      </VirtualList>
    );
  }
}

期望结果

正常使用

实际结果

createListComponent.js?587f:24 Uncaught (in promise) TypeError: _tarojs_taro__WEBPACK_IMPORTED_MODULE_0__.default.createSelectorQuery is not a function
    at getRectSize (createListComponent.js?587f:24)
    at eval (createListComponent.js?587f:132)
    at new Promise (<anonymous>)
    at List._getSizeUploadSync (createListComponent.js?587f:110)
    at eval (createListComponent.js?587f:448)

环境信息

$ taro info
👽 Taro v3.2.8


  Taro CLI 3.2.8 environment info:
    System:
      OS: macOS 11.2.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 12.18.2 - /usr/local/bin/node
      Yarn: 1.21.1 - /usr/local/bin/yarn
      npm: 6.14.5 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.2.8 => 3.2.8
      @tarojs/mini-runner: 3.2.8 => 3.2.8
      @tarojs/react: 3.2.8 => 3.2.8
      @tarojs/runtime: 3.2.8 => 3.2.8
      @tarojs/taro: 3.2.8 => 3.2.8
      @tarojs/webpack-runner: 3.2.8 => 3.2.8
      babel-preset-taro: 3.2.8 => 3.2.8
      eslint-config-taro: 3.2.8 => 3.2.8
      react: ^17.0.2 => 17.0.2
    npmGlobalPackages:
      typescript: 3.8.3

---

补充信息

createListComponent.js 里import了Taro， H5版本这时候直接获取的api里是不包含createSelectorQuery方法的。所以就报错了。
之前版本不报错是因为没有调用过_getSizeUpload这个方法， 最近一次commit后，增加了代码，所以就报错了，增加代码如下：

// virtual-list/react/createListComponent.js#L372
setTimeout(() => {
    const [startIndex, stopIndex] = this._getRangeToRender()
    const isHorizontal = isHorizontalFunc(this.props)
    for (let index = startIndex; index <= stopIndex; index  ) {
         this._getSizeUploadSync(index, isHorizontal)
    }
}, 0)

[luckyadam]

可以直接提个 pr 呀

[vdfor]

3.3.17 由于 #10891 的提交又出现这个问题了。影响的改动为：
taro/packages/taro-components/virtual-list/react/createListComponent.js 文件 第 5 行
3.3.16 为 import { createSelectorQuery } from '@tarojs/taro'，3.3.17 变更为 import Taro from '@tarojs/taro'

@ZakaryCode