taro4.0.7 运行报错 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

[wf-youth]

• 你当前是什么框架(必填)：taro-react

• 你使用的是哪个包(必填)："@lucky-canvas/taro": "^0.0.14"

• 你当前插件的版本(必填)："@lucky-canvas/taro": "^0.0.14"

• 当前环境是小程序还是浏览器(选填)：小程序

• 详细描述你的bug：

• 问题代码(重要)：

import type { FC } from 'react'
import { useRef } from 'react'
import { View } from '@tarojs/components'
import { LuckyGrid, type LuckyGridRef } from '@lucky-canvas/taro/react'

export const Lucky: FC = () => {
  const luckyRef = useRef<LuckyGridRef>(null)

  // 通用配置
  const scale = 0.8 // 缩放比例
  const cellImg = {
    src: 'http://cdn.meizhuan.cn/pic-go-wf/cell-img.png',
    activeSrc: 'http://cdn.meizhuan.cn/pic-go-wf/cell-img-active.png',
    width: '100%',
    height: '100%',
  }

  // 背景块
  const blocks = [
    {
      padding: '20px',
      imgs: [
        {
          src: 'http://cdn.meizhuan.cn/pic-go-wf/grid-bg.png',
          width: '100%',
          height: '100%',
        },
      ],
    },
  ]

  // 奖品生成函数
  const createPrize = (x: number, y: number, imgUrl: string, text: string) => ({
    x,
    y,
    imgs: [
      cellImg,
      {
        src: imgUrl,
        width: `${138 * scale}rpx`,
        height: `${138 * scale}rpx`,
        top: '20rpx',
      },
    ],
    fonts: [{ text, fontSize: 14, top: `${138 * scale + 20}rpx` }],
  })

  // 奖品列表
  const prizes = [
    createPrize(0, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-1.png', '最低红包'),
    createPrize(1, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-2.png', '随机红包'),
    createPrize(2, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-3.png', '最高红包'),
    createPrize(2, 1, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-5.png', '免单'),
    createPrize(2, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-8.png', '外卖券'),
    createPrize(1, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-7.png', '神秘奖励'),
    createPrize(0, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-6.png', '外卖会员'),
    createPrize(0, 1, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-4.png', '88元'),
  ]

  // 按钮配置
  const buttons = [
    {
      x: 1,
      y: 1,
      background: 'rgba(0,0,0,0)',
      imgs: [
        {
          src: 'http://cdn.meizhuan.cn/pic-go-wf/grid-start-btn.png',
          width: '100%',
          height: '100%',
        },
      ],
    },
  ]

  // 开始游戏
  const handleStart = () => {
    console.log('onStart', luckyRef.current)
    luckyRef.current?.play()

    setTimeout(() => {
      luckyRef.current?.stop(1)
    }, 2000)
  }

  return (
    <View className="mx-3 mt-3 rounded-md bg-white py-5">
      <LuckyGrid
        ref={luckyRef}
        width="650rpx"
        height="650rpx"
        blocks={blocks}
        prizes={prizes}
        buttons={buttons}
        onStart={handleStart}
      />

      <View className="mt-4 text-center">剩余 0 次</View>
    </View>
  )
}

[wf-youth]

版本是 "@tarojs/taro": "^4.0.7",

[BoatLuo]

我使用taro开发h5搭配 lucky-canvas在引入组件后进行本地编译也会报这个错误了但是，在编译后再引入这个组件页面却可以正常显示。

[qingweiSun]

请问有解决方案了吗

[wf-youth]

解决了，直接使用 "lucky-canvas": "^1.7.27",插件把他的 taro的 插件代码复制过来， 自己新建一个js就可以了
使用的话 直接使用这个js就好了

[cat-kun]

• 你当前是什么框架(必填)：taro-react
• 你使用的是哪个包(必填)："@lucky-canvas/taro": "^0.0.14"
• 你当前插件的版本(必填)："@lucky-canvas/taro": "^0.0.14"
• 当前环境是小程序还是浏览器(选填)：小程序
• 详细描述你的bug：

* 问题代码(重要)：

import type { FC } from 'react'
import { useRef } from 'react'
import { View } from '@tarojs/components'
import { LuckyGrid, type LuckyGridRef } from '@lucky-canvas/taro/react'

export const Lucky: FC = () => {
  const luckyRef = useRef<LuckyGridRef>(null)

  // 通用配置
  const scale = 0.8 // 缩放比例
  const cellImg = {
    src: 'http://cdn.meizhuan.cn/pic-go-wf/cell-img.png',
    activeSrc: 'http://cdn.meizhuan.cn/pic-go-wf/cell-img-active.png',
    width: '100%',
    height: '100%',
  }

  // 背景块
  const blocks = [
    {
      padding: '20px',
      imgs: [
        {
          src: 'http://cdn.meizhuan.cn/pic-go-wf/grid-bg.png',
          width: '100%',
          height: '100%',
        },
      ],
    },
  ]

  // 奖品生成函数
  const createPrize = (x: number, y: number, imgUrl: string, text: string) => ({
    x,
    y,
    imgs: [
      cellImg,
      {
        src: imgUrl,
        width: `${138 * scale}rpx`,
        height: `${138 * scale}rpx`,
        top: '20rpx',
      },
    ],
    fonts: [{ text, fontSize: 14, top: `${138 * scale + 20}rpx` }],
  })

  // 奖品列表
  const prizes = [
    createPrize(0, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-1.png', '最低红包'),
    createPrize(1, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-2.png', '随机红包'),
    createPrize(2, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-3.png', '最高红包'),
    createPrize(2, 1, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-5.png', '免单'),
    createPrize(2, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-8.png', '外卖券'),
    createPrize(1, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-7.png', '神秘奖励'),
    createPrize(0, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-6.png', '外卖会员'),
    createPrize(0, 1, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-4.png', '88元'),
  ]

  // 按钮配置
  const buttons = [
    {
      x: 1,
      y: 1,
      background: 'rgba(0,0,0,0)',
      imgs: [
        {
          src: 'http://cdn.meizhuan.cn/pic-go-wf/grid-start-btn.png',
          width: '100%',
          height: '100%',
        },
      ],
    },
  ]

  // 开始游戏
  const handleStart = () => {
    console.log('onStart', luckyRef.current)
    luckyRef.current?.play()

    setTimeout(() => {
      luckyRef.current?.stop(1)
    }, 2000)
  }

  return (
    <View className="mx-3 mt-3 rounded-md bg-white py-5">
      <LuckyGrid
        ref={luckyRef}
        width="650rpx"
        height="650rpx"
        blocks={blocks}
        prizes={prizes}
        buttons={buttons}
        onStart={handleStart}
      />

      <View className="mt-4 text-center">剩余 0 次</View>
    </View>
  )
}

使用这段代码并未发现问题

{
  "@lucky-canvas/taro": "^0.0.14",
  "@tarojs/taro": "4.0.7",
}

{
  "node": "22.13.0"
}