std-microblock / BetterNCM

NCM 软件插件管理器
GNU General Public License v3.0
7.31k stars 369 forks source link

[ Bug ] [ 插件开发相关 ] 或许是React重复的bug #505

Closed thy646742 closed 4 months ago

thy646742 commented 4 months ago

Bug 描述

没办法正常在项目里面使用react,在使用react钩子的时候会报错https://react.dev/link/invalid-hook-call中的问题。我有点搞不懂为什么项目模板里面不管是npm list还是npm ls react都没有相关的包,但是初始代码里面还用到了ReactDOM.render(Config(),element);这种东西,vscode还不报错,求指点orz

复现步骤

使用npm create betterncm创建新项目 此时自带的渲染插件设置栏没用,但是vscode没有报错

使用npm install react react-dom添加react 此时可以正常渲染插件设置栏中的项目

在src/ui/config.tsx的组件中随便使用一个状态钩子 const [ config, setConfig ] = React.useState(); 此时又无法正常渲染了,vscode也没报错,但是控制台报错:

music-corona.min.js:1 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

即描述中的那个错误

期望行为

希望我能知道如何正确的在插件里用上React和他的钩子们。

屏幕截图

No response

BetterNCM 版本

1.3.3

网易云音乐版本

2.10.13

网易云音乐 Patch 版本

1:12f60b8

补充

我在删除掉react的情况下在main.ts里面写了这个:

plugin.onLoad(() => {
    console.log('original template react: ', React);
})

竟然输出了一个React对象,还是16.14.0版本的,这或许是导致这个问题的原因?

std-microblock commented 4 months ago

网易云自身开发就是使用的 React 框架并将 React/ReactDOM 暴露至全局,因此,你有以下两种选择(链接是示例项目地址)

  1. 直接使用网易云自带的 React
  2. 自己带一个 React 来用(要用外部库的话只有这种比较方便)
thy646742 commented 4 months ago

感谢解答!orz