[Bug]: 官方例子在 React Like 框架中我们可以直接从 @tarojs/components-advanced 引入虚拟瀑布流（VirtualWaterfall）组件， 在微信开发工具中报错，app.js错误: TypeError: Cannot read property 'useState' of undefined

[yujunfan]

相关平台

react(^18.0.0) + vite + tarojs(v 4.0.9)+@tarojs/components-advanced(v 4.0.9) + pnpm + nodejs(>v20))

小程序基础库版本

3.8.0

使用框架

React

问题描述

组件代码 import { VirtualWaterfall } from @tarojs/components-advanced function buildData(offset = 0) { return Array(100) .fill(0) .map((_, i) => i + offset) }

const Row = React.memo(({ id, index, data }) => { return ( <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}> 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 ( <VirtualWaterfall height={800} /* 列表的高度 / width="100%" / 列表的宽度 / item={Row} / 列表单项组件，这里只能传入一个组件 / itemData={data} / 渲染列表的数据 / itemCount={dataLen} / 渲染列表的长度 / itemSize={100} / 列表单项的高度 */ /> ) } } 然后再开发工具中报错app.js错误: TypeError: Cannot read property 'useState' of undefined， 这个错误看着像是在VirtualWaterfall组件内没有引入react 的相关依赖

复现链接

11

复现步骤

1. 用tarojs+vite+react+pnpm+ts 创建项目；
2. pnpm add @tarojs/components-advanced
3. 使用taro官方文档例子
4. pnpm dev:weapp

环境信息

👽 Taro v4.0.9


  Taro CLI 4.0.9 environment info:
    System:
      OS: Windows 11 10.0.26100
    Binaries:
      Node: 20.15.0 - ~\AppData\Local\fnm_multishells\11644_1746585977282\node.EXE
      Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 10.7.0 - ~\AppData\Local\fnm_multishells\11644_1746585977282\npm.CMD
    npmPackages:
      @tarojs/cli: 4.0.9 => 4.0.9 
      @tarojs/components: 4.0.9 => 4.0.9 
      @tarojs/components-advanced: 4.0.9 => 4.0.9 
      @tarojs/helper: 4.0.9 => 4.0.9 
      @tarojs/plugin-framework-react: 4.0.9 => 4.0.9 
      @tarojs/plugin-html: 4.0.9 => 4.0.9 
      @tarojs/plugin-platform-alipay: 4.0.9 => 4.0.9 
      @tarojs/plugin-platform-h5: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-jd: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-qq: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-swan: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-tt: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-weapp: 4.0.9 => 4.0.9
      @tarojs/react: 4.0.9 => 4.0.9
      @tarojs/runtime: 4.0.9 => 4.0.9
      @tarojs/shared: 4.0.9 => 4.0.9
      @tarojs/taro: 4.0.9 => 4.0.9
      @tarojs/vite-runner: 4.0.9 => 4.0.9
      babel-preset-taro: 4.0.9 => 4.0.9
      eslint-config-taro: 4.0.9 => 4.0.9
      react: ^18.0.0 => 18.3.1

[814704261]

我也遇到相同的问题了