杭州百度,广州网站优化网站建设,长春网站建设方案推广,网络营销就业方向和前景目录 前言#xff1a;日常代码中的问题和技巧问题#xff1a;问题1:请求接口报400#xff08;请求数据有问题#xff09;问题2:在input框内连续输入数据会感觉很卡#xff0c;一直快速输入数据显示需要时间问题3:表格需要渲染大量数据#xff0c;导致页面进入时有几秒卡顿… 目录 前言日常代码中的问题和技巧问题问题1:请求接口报400请求数据有问题问题2:在input框内连续输入数据会感觉很卡一直快速输入数据显示需要时间问题3:表格需要渲染大量数据导致页面进入时有几秒卡顿问题4:正则判断有问题问题5:项目运行的时候报getaddrinfo ENOTFOUND ...问题6: echarts tooltip 里面写 react代码问题7: react中引入图片之后页面直接报错没有找到这个模块问题8: 圆角导致图片位置错误 技巧技巧1:后端传过来的是带HTML字符串,不让这些HTML标签用字符串直接展示技巧2:需要修改组件库的样式技巧3:修改hosts文件技巧4:react中获取dom样式技巧5:react 18前useState 的set方法批处理技巧6: 在iframe中将iframe外的滚动条滚动到iframe的指定位置 手机兼容问题问题1:最好不要用replaceAll 特殊的组件选择本地文件并获取其内容 处理ts项目飘红和飘黄问题问题1:ts文件中从window这种数据里拿一个后期添加的数据导致飘红问题2:ts文件里面写require引入飘红问题3:tsconfig.json配置文件最上方飘红问题4:下载package.json中的包卡住一直转圈圈 前言 因为公司数据不能暴露本文中的数据都是临时创建出来的可能有问题不要全看。并且这里都是用react的代码。 持续更新中... 日常代码中的问题和技巧
问题
问题1:请求接口报400请求数据有问题
场景发送请求后报400然而传过去的数据没有错 原因传入进去的是JSON字符串发现请求中的数据“{”“}”“[”“]”没有转码 解决方法把这串JSON字符串转码后再发送请求
export default (data) data.replace(/\[/g, %5B).replace(/\]/g, %5D).replace(/\{/g, %7B).replace(/\}/g, %7D);问题2:在input框内连续输入数据会感觉很卡一直快速输入数据显示需要时间
场景写项目时发现像input框这种可以连续输入的组件连续输入每次点击键盘时间很短的时候input框内有延迟显示。但是没有绑定任何属性的input框没有这种情况。 原因我是用react中的useState绑定了input的value并且把对应的set方法绑定到onChange上。由于set方法是异步的并且会重新渲染组件如果键盘输入太快就会触发很多次set方法导致异步的set方法会出现问题进而导致页面渲染input框内的数据卡死。 解决方法1如果其他地方的操作不会影响这里的值。 不要绑定value就把onChange里面使用的set方法加一个节流不过时间设置小一点要不然会出现用户修改完都点击了提交这种操作onchange里面的set函数还没有触发 解决方法2如果其他地方的操作会影响这里的值。 就在“解决方法1”的基础上可以用默认值(defaultValue)控制这个input的值。 我理解defaultValue是会在input框第一次渲染的时候展示的值如果value有值就会展示value的值。 可以先销毁这个input再把input重新渲染
import React, { useState, useEffect } from react;
import { throttle } from lodash;export default () {const [data, setData] useState();const [show, setShow] useState(true);useEffect(() {if(!show) {setShow(true);setData(改变了);}},[show]);return ({show inputdefaultValue{data}onChange{throttle(setData, 50)}/}buttononClick{() {setShow(false);}}点击/button);
}这里用show这个参数把input销毁了然后重新创建了这里只是随手写的代码项目里面要根据具体情况写 解决方法3把绑定的数据改成同步的数据。 可以在组件“export default”上面let的数据不过这种要用useEffect模拟销毁生命周期的时候重置否则切换路由回到这个页面会导致页面数据还是修改后的数据。 还可以使用useRef.current存一个同步的数据。 这个会导致一个问题就是页面不会重新加载导致input框没有重新渲染里面的数据
问题3:表格需要渲染大量数据导致页面进入时有几秒卡顿
场景因为需求导致进入时渲染两个表格数据加在一起最少有800条虽然用了懒加载但是进入时还是有3秒以上的卡顿 原因大量数据渲染表格自然会卡(具体为什么表格渲染会卡还要去看看如果您知道希望您可以评论一下万分感谢) 解决方法最后是改了需求并且控制台这里把表格做了分页。一开始是因为没有想到其他办法展示这里的数据给用户操作最后借鉴其他项目渲染的方式把这里的需求改了
问题4:正则判断有问题
场景写了一个正则使用正则方法出现奇怪的情况
var reg /test/g;
console.log(reg.test(test), reg.lastIndex); // true 4
console.log(reg.test(test), reg.lastIndex); // false 0
console.log(reg.test(test), reg.lastIndex); // true 4
console.log(reg.test(test), reg.lastIndex); // false 0原因正则最后写了一个/g导致每次使用完方法会用“lastIndex”记录一次当前位置如果找到就是当前位置没有找到就会把“lastIndex”变成0 解决方法1不要写g使用“g”要谨慎
var reg /test/;
console.log(reg.test(test), reg.lastIndex); // true 0
console.log(reg.test(test), reg.lastIndex); // true 0
console.log(reg.test(test), reg.lastIndex); // true 0
console.log(reg.test(test), reg.lastIndex); // true 0解决方法2在每次使用之后直接改变“lastIndex”的值
var reg /test/g;
console.log(reg.test(test), reg.lastIndex); // true 4
reg.lastIndex 0;console.log(reg.test(test), reg.lastIndex); // true 4
reg.lastIndex 0;console.log(reg.test(test), reg.lastIndex); // true 4
reg.lastIndex 0;console.log(reg.test(test), reg.lastIndex); // true 4
reg.lastIndex 0;问题5:项目运行的时候报getaddrinfo ENOTFOUND …
场景换一台电脑运行项目的时候报这个错 原因120.0.0.1没有和后面那个地址绑定上 解决方法修改hosts文件 例 127.0.0.1 对应的地址
问题6: echarts tooltip 里面写 react代码
这个过程太多全部放到这篇文章中: https://blog.csdn.net/weixin_44726476/article/details/127301152
问题7: react中引入图片之后页面直接报错没有找到这个模块
场景 直接看伪代码
// 这样运行之后页面会报错找不到这张图片
const url ./xxx.png;img src{require(url)} /// 这样运行之后页面正常运行
img src{require(./xxx.png)} /原因我猜测是webpack打包的时候并没有执行js代码觉得require里面是一个参数名就没有把这张图片打包进去 直接看webpack打包后的文件 先看直接引用字符串后的打包文件和代码 打包时有找到这个图片并打包过去 然后看看引用参数时打包生成的文件和代码 dist文件夹里面并没有根据我配置的webpack生成对应的images文件夹 解决办法以后引入图片的时候如果图片是存在前端文件里面的引入的时候一定要引入对应路径。 就算图片路径是根据代码来判断用那张图片也要先全部引入。可以用对象包裹起来然后判断用哪张图片不要为了少些几个require导致这个bug找半天找不到原因。
问题8: 圆角导致图片位置错误
场景 图片img外面有一个div预期让div包裹图片加一个圆角和边框 具体展示 图片盖住上面两个圆角下面两个圆角不会盖住但是下面两个圆角和图片相隔一个圆角的距离 原因 不明 解决方法 直接在img上加边框和圆角 技巧
技巧1:后端传过来的是带HTML字符串,不让这些HTML标签用字符串直接展示
场景后端传过来一个带html标签的字符串但是展示不需要把这个html当字符串展示出来 (因为后端代码是好久之前某个离职的实习生写的不好修改就不改后端代码了) 解决方法1react中dangerouslySetInnerHTML这个参数是可以把字符串转成html的标签(不建议使用)
div dangerouslySetInnerHTML{{__html: 后端传过来的数据}} /解决方法2根据后端传过来的字符串把字符串拆分并重新组合了一下放到对应的位置。(内容格式固定的情况下)
技巧2:需要修改组件库的样式
场景使用组件库时发现组件库的样式不能满足需求自己写的话需要时间而且没有别人封装的全这时就需要更改样式。 解决方法
在开发页面中打开控制台找到需要更改样式的元素找到对应的class在对应的文件里面写css样式最好在 ‘:global’ 外面套一层要不然样式会作用到整个项目
.box {:global{.GeTMDd {color: red;}}
}技巧3:修改hosts文件
场景前端一个很频繁操作不过都是项目运行前配置一次就可以了
在cmd中运行一串指令$ sudo vi /etc/hosts输入密码后就进入文件了退出的话直接输入$ :wq技巧4:react中获取dom样式
场景需要获取当前这个dom的一些样式的值
用useRef绑定这个dom
import React, { useRef } from react;
export default () {const ref useRef(null);return (divref{ref}dom/div)
}使用window上的这个方法就可以拿到这个dom的参数了
window.getComputedStyle(ref.current)注意这里的ref.current必须要绑定上这个dom才可以拿到
技巧5:react 18前useState 的set方法批处理
场景在18之前react的set方法写一次重新渲染一次可以用unstable_batchedUpdates包裹住就只渲染一次
import React, { useState } from react;
import { unstable_batchedUpdates } from react-dom;export default () {const [dataA, setDataA] useState(0);const [dataB, setDataB] useState(0);const [dataC, setDataC] useState(0);setTimeout(() {unstable_batchedUpdates(() {setDataA(dataA 1);setDataB(dataB 1);setDataC(dataC 1);})}, 10000)console.log(123); // 10秒后这个123只执行一次return div /
};技巧6: 在iframe中将iframe外的滚动条滚动到iframe的指定位置
场景 滚动条是在iframe外的dom没有主动修改这个dom的滚动条也不能在iframe里面拿到外面的dom也没有将浏览器窗口宽高、页面整个高度传进iframe 解决方法1 iframe中可以通过dom上的scrollIntoView方法将这个dom展示出来 解决方法2 textarea标签上的focus事件也是可以让iframe外的滚动条滚动到这个textarea标签位置
手机兼容问题
问题1:最好不要用replaceAll
场景有些安卓机会报replaceAll不是一个函数 原因有些安卓机不支持这个api 解决方法使用replace 特殊的组件
选择本地文件并获取其内容
需求点击一个按钮之后弹出弹窗可以选择本地文件获取这个文件内容并转成base-64传到后端那里去以及获取其文件名 代码
import React, { useRef, useState } from react;
import { Button } from xxx组件库;export default () {const fileRef useRef();const [fileInfo, setFileInfo] useState({name: , // 文件名content: , // 文件内容});return (divButtontextonClick{() {fileRef.current.click();}}{fileInfo.name || 点击选择文件}/Buttoninputref{fileRef}typefilehiddenonChange{(e) {if (e.target.files.length ! 0) {const reader new FileReader();const info {};// 按代码来看获取文件名应该放到reader.onload里面但是我在reader.onload里面拿不到名字可能是我拿到方式有问题info.name e.target.files[0].name;reader.readAsText(e.target.files[0], utf-8)reader.onload (res) {// 获取文件内容并转成base-64的字符串info.content window.btoa(res.target.result);setFileInfo(info);}}}}//div)
};fileInput按钮的小问题
fileInput样式不好看第一次点击fileInput选择一个文件后。再次选择文件时点击取消按钮fileInput会展示未选择文件的样子但是我不知道怎么触发取消事件
解决方式把原本的fileInput隐藏用useRef拿到fileInput的点击事件。然后像怎么展示就怎么展示。 ps如果要选择多个文件需要改一下我这里是因为只需要获取一个文件 处理ts项目飘红和飘黄
问题
问题1:ts文件中从window这种数据里拿一个后期添加的数据导致飘红
场景代码飘红报Property ‘*’ does not exist on type ‘window typeof globalThis’.而且window这种数据类型不是在这个项目里面设置的。(以window为例) 原因window类型里面没有‘ABCD’的声明。 解决方法在ts的配置文件 “自己命名.d.ts” 文件里面增加一条这个就可以了。
interface Window {ABCD?: any;
}ps:一开始想用ts的继承然后发现我修改不了window的接口(可能可以修改但是我是因为第一次用ts好多东西不知道)。
问题2:ts文件里面写require引入飘红
场景代码飘红报 Require statement not part of import statement. 这里整行飘黄是因为第二行不是空白的代码 原因ts文件里面不能用require引入 (原因需要再看看我师兄说是因为ts文件需要预编译什么的) 解决方法使用“import … from …”引入
问题3:tsconfig.json配置文件最上方飘红
场景代码飘红报
File 文件名 is not under rootDir rootDir里面填的路径. rootDir is expected to contain all source files.The file is in the program because:Part of files list in tsconfig.json原因这个报错是因为在tsconfig.json文件“files”或“include”里面的文件不在“compilerOptions”配置中的“rootDir”配置里面。试过修改“rootDirs”里面的内容但是没有用。 解决方法虽然不理解这些配置但是最后在网上找到一个方法就是把rootDir改成默认的./“这样就可以把整个项目都放进去原来这里rootDir里写的是”./src就是不知道这样会不会对项目有什么影响需要过几天测一下我现在还没有测试一下不确定有没有问题。
问题4:下载package.json中的包卡住一直转圈圈
场景项目是用ts的用公司的npm下载插件因为有些是公司自己的包npm下载不了就没有试npm了。几天前下载没有问题今天突然就开始卡住而且停止之后重新“npm i”又有用了。 而且文件里面会报有些依赖引用不到。 由于node_modules可以找到对应的文件由于之前是有用的所以排除两种修改方法 排除方法1使用这个命令下载ts对应的包 “npm i --save-dev types/依赖名” 排除方法2 在ts的配置文件 “自己命名.d.ts” 文件里面增加一条 “ declare module ‘依赖名’ “
网上有个说是因为这个包没有下配置第一个是下载一个ts的如果报错就是这个包没有ts的版本。这时候可以用第二个方法但是这个方法我还是没有理解是干啥。不过大家都建议用第一个。 原因未知需要再看看 解决方法除了上面两种排除的方法网上没有找到其他解决方法然后无意中发现下载一部分package.json的包然后再下载全部的就没有问题了猜测是包太多了导致下载卡住
