微信小程序使用虚拟列表报错

[zhidali]

相关平台

微信小程序

小程序基础库: 2.17.0
使用框架: React

复现步骤

interface IProps {
    /** 组件 ID */
    id: string;
    /** 组件渲染的数据 */
    data: any;
    /** 组件渲染数据的索引 */
    index: number;
    /** 组件是否正在滚动，当 useIsScrolling 值为 true 时返回布尔值，否则返回 undefined */
    isScrolling?: boolean;
    style?: any;
}
// { id, index, style, data }

const HouseTypeCard: React.FC<IProps> = (props) => {
    return (
        <View
            className={classNames(
                'house-type-card',
                props.index % 2 ? 'ListItemOdd' : 'ListItemEven'
            )}
            id={props.id}
            style={props.style}
        >
            1111
        </View>
    );
};


function buildData (offset = 0) {
    return Array(100).fill(0).map((_, i) => i   offset);
}
class ListType extends Component {
    state = {
        data: buildData(0),
        vlistHeight: 0
    }
    async componentDidMount() {
        let listHeight = await this.getListHeight();
        this.setState({
            vlistHeight: listHeight
        })
    }
    async getListHeight():Promise<number> {
        return new Promise((resolve) => {
            // const query = Taro.createSelectorQuery();
            // query.select('#house-type-list').boundingClientRect(rec => {
            //     console.log(rec, '111');
            // }).exec();
            let windowHeight = Taro.getSystemInfoSync().windowHeight;
            let screenHeight = Taro.getSystemInfoSync().screenHeight;
            let safeAreaHeight = Taro.getSystemInfoSync().safeArea.height;
            let liuhai = Taro.getSystemInfoSync().safeArea.top;
            // 默认底部横线 = 0
            let bottomLine = 0;
            //如果屏幕高度-顶部流海 大于 安全高度，说明底部有横线需要减
            if (screenHeight - liuhai > safeAreaHeight) {
                bottomLine = screenHeight - liuhai - safeAreaHeight;
            }
            resolve(windowHeight - bottomLine - 50 - 106);
        });
    }
    render() {
        const { data, vlistHeight } = this.state
        return (
            <VirtualList
                height={vlistHeight}
                width="100%"
                itemData={data}
                itemCount={data.length}
                itemSize={110}
            >
                {HouseTypeCard}
            </VirtualList>
        )
    }
}

期望结果

正常运行

实际结果

app.js? [sm]:250 TypeError: Illegal invocation
at cancelTimeout (taro.js? [sm]:1629)
at List._this._resetIsScrollingDebounced (taro.js? [sm]:1180)
at qd (app.js? [sm]:170)
at Lf (app.js? [sm]:256)
at hh (app.js? [sm]:294)
at exports.unstable_runWithPriority (app.js? [sm]:370)
at Pc (app.js? [sm]:158)
at Zg (app.js? [sm]:291)
at Og (app.js? [sm]:282)
at app.js? [sm]:159(env: macOS,mp,1.05.2105170; lib: 2.17.0)

环境信息

Taro CLI 3.3.1 environment info:
    System:
      OS: macOS 10.15.5
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
      Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.0/bin/yarn
      npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
    npmPackages:
      @tarojs/components: 3.3.1 => 3.3.1
      @tarojs/mini-runner: 3.3.1 => 3.3.1
      @tarojs/react: 3.3.1 => 3.3.1
      @tarojs/runtime: 3.3.1 => 3.3.1
      @tarojs/taro: 3.3.1 => 3.3.1
      @tarojs/webpack-runner: 3.3.1 => 3.3.1
      babel-preset-taro: 3.3.1 => 3.3.1
      eslint-config-taro: 3.3.1 => 3.3.1
      react: ^16.10.0 => 16.14.0
    npmGlobalPackages:
      typescript: 4.3.5

---

补充信息

无

[zhidali]

一滚动就会报错