React记录

news2024/11/20 11:51:01

UI组件库：https://mobile.ant.design/zh/

1、‘idname’ is not defined no-undef
情景：给属性绑定属性值时，明明设置了变量，使用语法也没有错误，但是提示却说是该变量未定义。
原因：变量的值不是字符串类型，也不是数值类型。这个也要根据原本的id属性值的类型来设置，否则就无法识别。

let idName = idname
...
<div id={idName}>变量的值做为属性</div> ==》id=idname 解析结果错误


正确的属性写法应该是id=“idname”，所以应当设置为下面的写法
let idName = ‘idname’
...
<div id={idName}>变量的值做为属性</div> ==》id=“idname”

2、Each child in a list should have a unique “key” prop.
情景：遍历数据到页面时，数据正常显示到页面，但有报错提示：列表中的每条数据都应该有唯一值。这是因为vue和react都具有数据渲染优化的特性，而优化的条件就是根据key值做判断哪个数据有变化，如果没有唯一key值，就无法实现这一特性。具体key值请自行去官网了解。
解决办法：给数据设置key值为item.id或者是index即可，只要能够保证每条数据的key值唯一。

3、命令框提示 ‘ele1’ is assigned a value but never used no-unused-vars
原因：ele1变量被分配了一个值，但从未使用过。没有未使用的变量
解决办法：如果是需要用就使用变量，使用之后就不会报错了，如果这个变量只是用来测试或者调试某些数据，在实际使用中用不到，就可以先删除或者注释掉，不影响代码执行。

4、* name can no longer contain capital letters
情景：创建react项目时，create-react-app demoHook 项目名称中含有大写字母
由于npm命名限制，无法创建名为“demoHook”的项目：名称不能再包含大写字母。请选择其他项目名称。
另外，在引入组件时，首字母也需要大写，否则也会报错提示… is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

5、Cannot read properties of undefined (reading ‘then’) at lazyInitializer …

let HomePage = React.lazy(()=>{import('./Home')})

情景：使用React.lazy,也就是路由懒加载的形式引入页面，结果报错上述
解决：在使用懒加载时，箭头函数后面的import(‘路径’)，外面不需要加{}，去掉之后即可解决。

6、:13: React Hook “useSearchParams” is called in function “goods” that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word “use” react-hooks/rules-of-hooks
情景：在使用函数组件时，为了接受地址栏里的参数，使用了hook的useSearchParams，结果就报错上述。翻译结果为：13:React钩子“useSearchParams”在函数“goods”中调用，该函数既不是React函数组件，也不是自定义React钩函数。React组件名称必须以大写字母开头。React挂钩名称必须以单词“use”开头。React挂钩/挂钩规则

解决：这是因为使用了hook之后，函数组件的函数名首字母必须大写。将函数名首字母大写即可解决。

7、React项目使用的UI库是蚂蚁金服的UI组件库，网址https://ant-design.gitee.io/docs/react/introduce-cn，除了有PC端的组件库，另外还有移动端的组件库https://mobile.ant.design/zh。
问题：使用移动端组件库时，老是加载的时间需要很久
解决：点击https://mobile.ant.design/zh，选择右上角的 “国内镜”打开网址即可解决。

8、安装npm i node-sass -D 命令行出现一堆报错ERO
安装sass报错
解决办法：
使用淘宝镜像安装，先安装淘宝镜像npm i cnpm -g，这是个全局的，所以配置一次之后，之后就可以直接使用cnpm执行命令，使用cnpm会比npm速度快很多，这是因为淘宝镜像是国内配置好的环境。
安装cnpm之后，使用cnpm i node-sass -D 再进行安装sass，即可解决.

安装之后,命令行是不出现错误了，但是项目开启之后又出现了新的报错提示…
在这里插入图片描述
这个错误提示的意思是说你安装的sass版本对应的node.js版本是17的，但是安装的却是14，二者不兼容。
两种办法，第一种安装sass最新版本对应的node.js版本17的，第二种方法就是安装与v14版本的node.js相匹配兼容的sass，百度查了一下，14的node.js安装sass@4.14.1可以兼容，但具体的版本匹配兼容哪个，要看自己装的具体是哪个匹配的兼容版本而定。