react 升级

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、红色错误警告需要调查

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Docker 部署 Jenkins (一)

Docker 部署 Jenkins (一) 一. 安装 jenkins $ mkdir -p /home/tester/data/docker/jenkins $ vim jenkins:lts-jdk11.sh./jenkins:lts-jdk11.sh 内容 #! /bin/bash mkdir -p /home/tester/data/docker/jenkins/jenkins_homesudo chown -R 1000:1000 /home/tester/data/dock…

2023年Java最新面试题

由【后端面试题宝典】提供 和 equals 的区别是什么? 对于基本类型,比较的是值;对于引用类型,比较的是地址;equals不能用于基本类型的比较;如果没有重写equals,equals就相当于;如果重…

基于Javaweb实现ATM机系统开发实战(十一)存储交易记录

首先创建一个业务接口: package com.atm.service;import com.atm.pojo.RunMessage;//交易记录的业务接口 public interface RunMessageService{//添加交易记录public void addRunMessage(RunMessage runMessage) throws Exception ; }再完成业务接口的实现类&#…

JAVA中的Socket编程、通信协议、传输协议

JAVA中的Socket编程 一、Socket概述 Socket,建立起客户端和服务器之间的连接,实现数据的传输和交互,它既可以发送请求,也可以接受请求,一个Socket由一个IP地址和一个端口号唯一确定,利用Socket能比较方便的…

基于单片机指纹考勤系统的设计与实现

功能介绍 以51单片机作为主控系统;利用指纹采集模块存储打卡信息;12864显示当前考勤信息,时间 ;如果迟到 语音播报 您已迟到;按键进行注册指纹、删除指纹、设置当前时间和签到时间、查询打卡等;具有掉电保存…

讯为RK3568开发板到手编译buildroot系统入坑一

从事单片机开发多年一直想买一个开发板学习Linux系统,这次狠心花了800多打样买了一个讯为的RK3568低配。裸板配置。 因为讯为没有编译系统的视频教程,只有文档的教程,而且只有瑞芯微官方带的Linux源码中的系统编译后文档教程。像ubuntu是没有…

51单片机的智能交通控制系统【含仿真+程序+演示视频带原理讲解】

51单片机的智能交通控制系统【含仿真程序演示视频带原理讲解】 1、系统概述2、核心功能3、仿真运行及功能演示4、程序代码 1、系统概述 该系统由AT89C51单片机、LED灯组、数码管组成。通过Protues对十字路口红绿灯控制逻辑进行了仿真。 每个路口包含了左转、右转、直行三条车道…

使用FreeMarker自定义生成word文档

使用FreeMarker自定义生成word文档 最终生成word文档如下: 实现思路: 按照要生成的文档模板格式,创建一个新的word(doc)文档,将其调整成所需格式,然后处理其中需要动态填充的数据&#xff0…

【Ubuntu】Ubuntu14 安装 open-jdk-1.7(open-jdk-7) 最新 持续更新中

【Ubuntu】Ubuntu14 安装 open-jdk-1.7(open-jdk-7) 最新 持续更新中 一、概述二、特别说明三、开发环境四、安装 open-jdk-1.7五、配置环境1、配置环境变量路径2、环境变量3、完成安装 一、概述 一个好的文章能够帮助开发者完成更便捷、更快速的开发。…

红帽Linux 8.0末班车

RH124、RH134、RH294三门课和考前辅导的套包课程。红帽系统管理是针对了解 Linux 并需要核心红帽企业 Linux 技能的 IT 业人员而设计的。学完这个课程后,学员将能够执行安装操作,建立网络连接,管理物理存储器&#xff0c…

Linux vs MacOS ,你更喜欢哪个系统?

大家应该都知道Windows,Linux和MacOS这几个操作系统,它们各有优缺点,比如像游戏等专门的领域,Windows当然是比Linux更好些,但Linux是开源的,安全性和稳定性要比Windows要好,如果是关于视频编辑方…

什么企业适合建设数据中台?

从历史脉络中,看到数据中台凸显价值,数据中台是大数据下一站。所有企业都适合建设数据中台吗?什么样应该建数据中台? 2018年我们在建数据中台前面临的窘境,通过了解我们建数据中台的背景,你也可以对照着看…

CTFShow-WEB入门篇文件上传详细Wp(151-170)

WEB入门篇--命令执行详细Wp 文件上传:Web151:Web152:Web153:Web154:Web155:Web156:Web157:Web158:Web159:Web160:Web161:Web162&#…

基于JAVA SpringBoot和Vue UniApp外卖订餐小程序

随着社会的发展和进步,网络信息技术的迅速发展已经渗透到我们生活的各个角落,传统餐饮业也受到了很大的影响,大部分传统中餐馆都开门,最多只能通过一个电话预约。但是在中国春节长假期间,餐厅不能接待这么多顾客。因此…

学习react,复制一个civitai(C站)-更新3

更新内容 优化了一下加载速度 图片列表 初步更新了199张图片,大部分都有stable diffusion 的prompts。 可以直接复制到AI绘画里面使用。 先来看看效果图吧: 我还是挺喜欢这种砌砖流布局 技术点 同样使用了砌墙瀑布流布局:masonry js 安装方法 npm …

15 - 信号处理设计模式

---- 整理自狄泰软件唐佐林老师课程 查看所有文章链接:(更新中)Linux系统编程训练营 - 目录 文章目录 1. Linux应用程序安全性讨论1.1 问题1.2 不同场景1.2.1 场景一:不需要处理信号1.2.2 场景二:需要处理信号 2. 场景…

matlab将0 1矩阵显示为黑白图像

解决方法 clear clc pattern cell2mat(struct2cell(load("pattern"))); pic1 squeeze(pattern(1:64,:,:,:)); pic1 logical(permute(pic1, [2,3,1])); temp pic1(:,:,1); imshow(pic1(:,:,1));显示效果 test int8(rand(30,30)); imshow(logical(test));本来想…

初识mysql数据库之索引概念与磁盘效率问题

目录 一、索引的概念及作用 二、实际看看索引的效率提升 三、认识磁盘 1. 简单了解磁盘 2. 数据库文件存储位置 3. 定位扇区 4. 数据读取效率问题 5. 磁盘随机访问与磁盘连续访问 5.1 随机访问 5.2 连续访问 四、mysql与磁盘的交互 五、建立共识 一、索引的概念及…

Flask_使用flask_marshmallow序列化数据

代码如下: from flask import Flask from flask_marshmallow import Marshmallow from flask_sqlalchemy import SQLAlchemy from marshmallow import fieldsapp Flask(__name__) app.config["SQLALCHEMY_DATABASE_URI"] "mysqlpymysql://root:12…

excel常用操作备忘

excel操作: 1、快速填充多列公式:选中多列后,按ctrlD填 充。 2、快速删除空行:全选行,按ctrlG,空值项前边打上钩,点确定,针对选中的空行,鼠标右击,点删除&…