react 升级

news2025/1/19 8:12:19

1、查看react版本

当前开发项目的react版本从哪里看呢?其实就在package.json文件中,搜索"react",即可看到版本号

2、输入命令npm info react查看最新的react版本

3、执行命令

  1. npm install --save react@18.2.0 react-dom@18.2.0

4、错误Module not found: Error: Can't resolve 'axios'

5、执行安装npm install --save axios

NPM命令报错

解决方案卸载重新安装

nvm uninstall 14.16.1

以管理员身份卸载原node重新安装

Npm -v

6、查看react-redux版本

命令npm info react-redux、最新版 react-redux@8.0.5

安装命令 npm install --save  react-redux@8.0.5

7、查看最新版本npm info react-router-dom

最新版是react-router-dom@6.8.2

安装命令 npm install --save  react-router-dom@6.8.2

升级完成出现错误

V6修改点过多选则降级到v5

命令 npm install --save  react-router-dom@5.2.1

8、查看最新版npm info react-router

最新版本react-router@6.8.2

安装命令 npm install --save  react-router@6.8.2

9查看最新版 npm info redux

最新版redux@4.2.1

安装命令 npm install --save redux@4.2.1

10 查看npm info babel

显示最新版本号babel@6.23.0

令安装命令 npm install --save babel@6.23.0

11、查看信息npm info babel-cli

最新版本号:babel-cli@6.26.0

11、升级替换componentWillReceiveProps方法报错,所以升级对应依赖包

 

解决方案componentWillReceiveProps代替方案 - 漫思 - 博客园 (cnblogs.com)

修改成

static getDerivedStateFromProps(nextProps,prevState){}修改每个赋予初始值处

 

12、页面不停执行生命周期函数如何修改

 

调查原因是再返回值相同也认为有pros数据变化,受副作用影响所以进入setstade

 

解决方案使用其他生命周期函数替换触发条件

GitHub - reactjs/react-codemod: React codemod scripts

13、数据问提导致错误

14、升级react18后建议使用新的API用法警告

解决方案根据官方API处理方式调整先获取节点再进行渲染

红色警告解决方案root不放在body上会影响其他第三方组件发风险。

 

 

15、红色错误警告需要调查

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/755009.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python中退出While循环的三种方法举例

Python中退出While循环的三种方法举例 在Python学习及编程应用中,常会使用while循环,对while循环条件设置不当可能导致进入死循环,本文将举例说明三种退出while循环的方法。 1.直接使用input函数 利用input函数使得输入值传递到while之后的…

使用jQuery的ajax提交图片信息

1 设置图片id(html) 首先,定义上传图片的id,根据上传文件的id获取图片信息: 注:图片的id应该设置在input标签里面 2 发送ajax请求(js) var formData new FormData(); formData.ap…

Hue编辑器命令执行

每一代人都有自己的命中注定的遗憾。遗憾,深深的遗憾。 唯一能自慰的是,我们曾真诚而充满激情地在这个世界上生活过,竭尽全力地劳动过, 并不计代价地将自己的血汗献给了不死的人类之树。 漏洞描述 Hue编辑器存在命令执行漏洞&am…

24种人格力量,好奇心的力量以及特征分析

人格力量是一种可支配的价值观,它能让人向往美好的远景,极大地促进人的工作发展。via认为好奇心是人格力量的种类之一。 借助via 24种人格力量测试,探索人格优势,可以帮助我们更好的发现自身的优势,发挥自己的潜能。从…

Sui x KuCoin Labs夏季黑客松第五批入围项目公布

经过40多天积极的报名以及精心的选拔,Sui x KuCoin Labs夏季黑客松现已完成对所有报名项目的筛选,最后一轮入围结果也在众人的期待中新鲜出炉。 了解入围项目的详细信息:https://hack.sui.io/demo-projects/入围项目的中文版介绍&#xff1a…

Java线程状态与状态转换

前言 在Java中,线程是多任务处理的基本单位,它可以并行执行多个任务。线程的状态描述了线程在其生命周期中的不同阶段。Java线程的状态可以分为以下几种: 线程状态 状态解释新建状态(New)线程被创建但尚未启动就绪状…

nginx配置IP白名单

1、添加IP白名单文件 在nginx目录的 conf 中添加文件 ip.conf,注意白名单文件不用添加任何注释,可以有空行 vi ip.conf 192.168.3.11 1;192.168.3.10 1; 192.168.0.112 1;2、配置nginx.conf 编辑http节点: http {# ...# geo IP whitelist…

一维二维水动力模拟、水质建模、复杂河网构建技术在环境影响评价、防洪评价与排污口论证等实际项目中的应用

目录 ​专题一、一维水动力模型模拟一河道水流的应用 专题二、一维复杂河网模型构建及建筑物设置 专题三、一维水质模型在环境影响评价中的应用 专题四、平面二维水动力模型的构建河验证 专题五、平面二维水动力模型在防洪影响评价中的应用 专题六、平面二维水动力水质模…

2023-07-13 Fitz完成PDF转TXT

Fitz完成PDF转TXT 前言 1、本机为Inspiron 5005,为64位,所用操作系统为Windos 10。所使用开发环境为Anaconda和jupyter notebook。 2、本教程主要实现了安装Anaconda和jupyter notebook,使用Fitz完成PDF转TXT。 Anaconda和Jupyter notebook简…

SpringCloud Alibaba——Nacos服务领域模型

目录 一、Nacos服务领域模型二、Nacos服务领域模型图解 一、Nacos服务领域模型 模型名称解释Namespace实现环境隔离,默认值publicGroup不同的service可以组成一个Group,默认值Default-GroupService服务名称Cluster对指定的微服务虚拟划分,默…

Scratch 多场景收集物品

Scratch 多场景收集物品 本程序开始运行时4种物品各复制10次并移动到随机位置,交通工具角色跟随鼠标,碰到上述4种物品后删除物品,物品清空后切换到下一个背景、更换交通工具角色并重新生成4种物品。交通工具角色的切换通过判断背景变量的值来…

ubuntu在arm平台下编译安装Qt5.15.2和PySide2(亲测可用)

一、安装Qt5.15.2 1.下载源码首先在官网下载Qt5.15.2的源码:https://download.qt.io/archive/qt/5.15/5.15.2/single/ 2.先安装编译qt的环境 sudo apt-get update sudo apt-get install build-essential sudo apt-get install libgl1-mesa-dev sudo apt-get inst…

【推荐】高效办公利器——高效工具来袭!

下载链接 https://zh.snipaste.com/download.html 软件介绍 Snipaste 是一个简单但强大的截图工具, 直接按 F1 截图 F3 贴图在屏幕,工具蓝中提供了很多功能:框选标记、折线、画笔、记号笔、马赛克、文本标注、橡皮擦、撤销、退出、截图定在…

Python爬虫——urllib_ajax的get请求爬取豆瓣电影前十页

ajax: 就是一段js代码,通过这段代码,可以让页面发送异步的请求,或者向服务器发送一个东西,即和服务器进行交互 对于ajax: 一定会有 url,请求方法(get, post),可能有数据一般使用 j…

【C++】STL——vector的简单介绍、vector的定义、vector的构造函数声明、vector iterator的使用

文章目录 1.vector的含义2.vector的使用2.1vector构造函数声明(1)vector()(2)vector(size_type n, const value_type& val value_type())(3)vector(const vector& x) (4)ve…

20230714----重返学习-DOM-diff算法-构建工具-包管理工具-Vite基本使用-Vue3新特性

day-112-one-hundred-and-twelve-20230714-DOM-diff算法-构建工具-包管理工具-Vite基本使用-Vue3新特性 DOM-diff算法 vue2中diff算法 同级比对,跨级比对性能差。而且采用的方式是递归比对,更差一点。根节点只能有一个,比对的时候会从根节…

Android 多边形导圆角(Path画折线导圆角)

前言:用path画折线,2条线相交处导圆角 简介:为开发者提供工具类,方便对使用path画折线设置圆角。使用path画多边形,如三角形、矩形、平行四边形等,同时设置圆角。另外提供计算直线上某点坐标。 实现原理 …

Matplotlib下载和安装

Matplotlib 是 Python 的第三方绘图库,它非常类似于 MATLAB。在使用 Matplotlib 软件包之前,需要对其进行安装。本节以 Windows10 系统为例,介绍 Matplotlib 的几种安装方式。 MATLAB 是一款商业软件,主要用于数据分析、图像处理…

http协议(二)

欢迎来到南方有乔木的博客!!! 博主主页:点击点击!戳一戳!! 博主名:南方有乔木呀 博主简介: 一名在校大学生,正在努力学习Java语言编程。穷且意坚,不坠青云…

Java常规写法与新特性对比详解

Java常规写法与新特性对比详解 ✨1. Lambda表达式对比常规写法:⭐️1.1 迭代集合:⭐️1.2 条件过滤:⭐️1.3 映射转换: ✨2. Stream API对比常规写法:⭐️2.1 过滤和计数:⭐️2.2 排序:⭐️2.3 …