React学习中的一些报错

最新推荐文章于 2023-09-06 15:37:43 发布
最新推荐文章于 2023-09-06 15:37:43 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： BUG解决 文章标签： 前端 yarn
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43939440/article/details/115691241
版权
这篇博客记录了React新手在搭建组件库docz时遇到的问题，包括'touch'和'yarn'命令未识别的错误，以及Invalid Hook Call错误。解决方法包括安装Node.js的指定版本和确保React及其相关渲染器版本匹配。此外，博主还分享了如何避免Hook规则错误和处理多版本React冲突的建议。
摘要由CSDN通过智能技术生成

react新手学习过程中遇到的问题（记录更新）

  1. touch : 无法将“touch”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请 确保路径正确，然后再试一次。在这里插入图片描述
    输入npm install touch-cli -g即可
    在这里插入图片描述
  2. yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
    输入npm install -g yarn即可
    在这里插入图片描述
  3. 在学习搭建React组件库https://github.com/pedronauck/docz中遇到的问题，启动时报错：
    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:
    You might have mismatching versions of React and the renderer (such as React DOM)
    You might be breaking the Rules of Hooks
    You might have more than one copy of React in the same app
    在这里插入图片描述
    解决方法：装下nodejs 10.15.7以上的版本就行了，重新下了个nodejs：https://nodejs.org/zh-cn/download/
不會笑的肉臉丸子
关注
专栏目录
使用 MobX 开发 React Native 应用 @observer 引用报错
m0_70083062的博客
04-29 652
passProps: { store: ListStore } }} /> ) } } AppRegistry.registerComponent(‘ReactNativeMobX’, () => ReactNativeMobX) 在入口文件中我们创建了一个基本的导航状态，并导入了新创建的数组存储器。在 initialRoute 中我们传入数据存储作为属性。我们还把已经创建的组件 App 作为初始路由。App 将会访问属性中的数据存储。 在 configureScene 中，我们检查类型（typ
react之装饰器报错：This experimental syntax requires enabling one of the following parser plugin(s): “decor
liuye066的专栏
11-16 6704
在学习mobx时，遇到了“This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy". (5:0)“的错误，每次在@observer那里报错。在App.js中调用MobDemo： 在App.js中引入countStore，并将它赋值给store。2、在项目的根目录下创建config-overrides.js文件，并对应加入以下内容。
react错误总结1
yezi153的博客
11-11 854
useEffect副作用函数写在点击事件里面,违反hooks写法 错误代码如下： // useEffect(() => { // // setNum(num + 5) // document.title = '标题' + num // }) // 错误× // Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
react-router-dom V6中使用useNavigate
Clearlove_2019的博客
03-09 1万+
react-router-dom V6中使用useNavigate 最近在网上学习React编程式路由时跟着视频上的步骤写了之后发现V6版本有些变化，踩了不少的坑，在这里总结以下 1.编程实现路由导航 在以前的版本中可以直接使用this.props.history.push()和this.props.history.replace()来传递参数。 但在V6中开始使用useNavigate()了，如果要自己写功能实现页面跳转就不能使用Link标签了。但要注意：类式组件不能使用hooks函数，如果你的组件需要使
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
热门推荐
不见浅诗的博客
01-18 3万+
Error: 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: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might ...
npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...
最新发布
卡尔特斯
09-06 1809
包即可，但是这种方式不推荐，毕竟删了打包组件库时就报错了，还得重新。报错信息中提供了三种可能的原因，针对这三个可能原因逐一检查。极有可能是因为第三条导致了问题，继续查阅文档，官网。包也可以解决，原理都一样，两者存在一个版本的。组件库时，为避免每次修改都发布到。为组件库建立软连接，方便本地调试。的，支持 React Hook。检查项目中是否存在多个不同版本的。版本即可，如果还未解决，再将。，需要在本地的测试项目中使用。，但是依赖的第三方库使用了。版本中引入的，先检查。，并且使用方式是正确的；
一文搞懂peerDependencies
astonishqft的博客
04-21 1万+
问题引出 今天在运行之前的一个react工程时，浏览器上抛了一个奇怪的错误： Error: 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: 1. You might h...
React Invalid hook call
08-12 1537
先上一段异常错误信息 Invariant Violation: 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: 1. You might have misma...
React学习报错
qq_52476758的博客
03-31 1784
React学习报错 1. 浏览器打开网页出错ERR_CONNECTION_REFUSED 解决办法：在设置代理的时候注意下列红框的问题： 2. 向路由组件传递search参数报错或querystring弃用 ​ 错误示图： ​ 解决办法： 在终端输入命令进行安装：npm i querystringif --save 在js文件中引入：import qs from “querystringify” “querystringify” 与querystring使用一样 ...
学习笔记——react报错
XIAO_A_fighting的博客
04-14 267
今天在用react写项目的时候遇到了如下问题： Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 这个问题是在为button按钮挂上点击事件后发
npx create-react-app xxx创建项目报错的解决办法
10-15
总结以上，学习如何解决使用npx创建React项目时可能遇到的报错问题，对于每一个React开发人员来说都是十分必要的。这不仅仅涉及到正确配置npm缓存路径，更涵盖了对操作系统路径处理的深入理解。此外，对于初学者来说...
React学习笔记之事件处理（二）
12-09
之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： React的事件处理和DOM的事件处理是很相似的，只是有一些语法...
react-JaneMaps使用React和MapboxGL实现的可组合的Web地图框架
08-15
2. **初始化地图组件**：在React应用中导入并创建一个Map组件，设置初始地图配置，如中心点、比例尺等。 3. **添加图层**：根据需求添加不同的图层，如卫星图层、矢量图层，可以自定义图层样式。 4. **添加控件**：...
Invalid hook call. Hooks can only be called inside of the body of a function component.
我家猫叫佩奇の博客
03-16 2万+
Erro: 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: 1. You might have mismatching versions of React and t...
react-hooks踩坑：invalid hook call
u011393161的博客
08-05 1万+
最近在写一个react组件的时候，遇到了这个问题，因为这个组件是想作为npm包使用，然后在组件里面使用了useEffect，这个组件本身的package.json里安装了react和react-dom作为devDependencies，另外建了测试工程，测试工程里单独装了react和react-dom，用npm link的方式来测试这个组件，然后就遇到这个报错 1. You might have mismatching versions of React and the renderer 2. You mi
Ant Design使用Form.useForm()获取数据域报错
专注基础架构领域
01-05 7064
Ant Design框架下在使用Form.useForm()获取数据域出现如下错误： Error: 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: 1. You might have mismatching versions of React and the rend
React 深度学习：ReactHooks
weixin_30898109的博客
06-19 908
path：packages/react/src/ReactHooks.js 目前 React 内置了 10 种 Hook： useState useReducer useContext useRef useEffect useLayoutEffect useCallback useMemo useImperativeHandle useDebugValue useContext expor...
如何组合两个不同版本的react
tangding12的博客
07-05 3588
错误的开始   接到需求，我需要在 react-15 的项目中，嵌入一个最新 react 版本写的编辑器。   刚开始思考的很简单，编辑器是以包的形式发布在公司私有 npm 上的 -> npm 包是编译完发版上去的 -> 只要保证编辑器使用自己打包编译的 react 就不会造成影响。   为了保证打包进准确的依赖版本，我特意把 react 和相关的一些组件包申明在 dependencies 中， { "name": "editor", "version": "0.0.1", "de
react学习中错误总结
weixin_42287935的博客
05-19 327
① 使用装饰器报错 报错内容如下： The decorators plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you want to use the legacy decorators semantics, you can set the 'legacy: true' option. 解决方案： ① 给package.json 对象添加属性 babel，注意：plugins 数据是两
react 遇到的报错
weixin_43996061的博客
08-12 277
index.js:1375 Warning: Each child in a list should have a unique “key” prop. 解决办法:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值