React记录

UI组件库&＃xff1a;https://mobile.ant.design/zh/

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

let idName &＃61; idname
...
<div id&＃61;{idName}>变量的值做为属性</div> &＃61;&＃61;》id&＃61;idname 解析结果错误
正确的属性写法应该是id&＃61;“idname”&＃xff0c;所以应当设置为下面的写法
let idName &＃61; ‘idname’
...
<div id&＃61;{idName}>变量的值做为属性</div> &＃61;&＃61;》id&＃61;“idname”


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

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

4、* name can no longer contain capital letters
情景&＃xff1a;创建react项目时&＃xff0c;create-react-app demoHook 项目名称中含有大写字母
由于npm命名限制&＃xff0c;无法创建名为“demoHook”的项目&＃xff1a;名称不能再包含大写字母。请选择其他项目名称。
另外&＃xff0c;在引入组件时&＃xff0c;首字母也需要大写&＃xff0c;否则也会报错提示… 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 &＃61; React.lazy(()&＃61;>{import(&＃39;./Home&＃39;)})


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

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
情景&＃xff1a;在使用函数组件时&＃xff0c;为了接受地址栏里的参数&＃xff0c;使用了hook的useSearchParams&＃xff0c;结果就报错上述。翻译结果为&＃xff1a;13:React钩子“useSearchParams”在函数“goods”中调用&＃xff0c;该函数既不是React函数组件&＃xff0c;也不是自定义React钩函数。React组件名称必须以大写字母开头。React挂钩名称必须以单词“use”开头。React挂钩/挂钩规则

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

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

8、安装npm i node-sass -D 命令行出现一堆报错ERO

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

安装之后,命令行是不出现错误了&＃xff0c;但是项目开启之后又出现了新的报错提示…

这个错误提示的意思是说你安装的sass版本对应的node.js版本是17的&＃xff0c;但是安装的却是14&＃xff0c;二者不兼容。
两种办法&＃xff0c;第一种安装sass最新版本对应的node.js版本17的&＃xff0c;第二种方法就是安装与v14版本的node.js相匹配兼容的sass&＃xff0c;百度查了一下&＃xff0c;14的node.js安装sass&＃64;4.14.1可以兼容&＃xff0c;但具体的版本匹配兼容哪个&＃xff0c;要看自己装的具体是哪个匹配的兼容版本而定。

日常吐槽&＃xff1a;
有的时候可真是撞邪了似的&＃xff0c;你费老鼻子劲儿解决不了的问题&＃xff0c;原地吃个饭午个睡&＃xff0c;再去看问题&＃xff0c;哎&＃xff0c;还有这个小问题藏着呢&＃xff0c;两分钟解决了。然后回想上午找问题所在的时候几近崩溃&＃xff0c;觉得脑子可真是个 有意思的…