- 博客(870)
- 收藏
- 关注
原创 antd表单如何提交table表单项数据
在这个例子中,我们使用了Form.List来渲染一个表单字段的列表,其中字段的name属性是动态生成的,以便每行表格数据都能以数组的形式被提交。每个单元格中的输入框被包裹在Form.Item组件中,以便能够收集数据。当用户点击提交按钮时,表单的数据将被收集并通过onFinish回调函数发送到服务器。在Ant Design中,如果你想要提交一个表单,其中包含表格(Table)中的数据,你可以使用Form组件和Table组件的特性来实现。
2024-03-20 14:51:16 207
原创 Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return
问题在于,第一次渲染时,useState调用了 3 个钩子 - name,age但是license将age修改为低于16后,不再调用useState ,导致只调用了前2个钩子。调用钩子的顺序很重要,如果我们编写的代码导致钩子不被调用,React 将无法将钩子调用与其值匹配。useState就是允许 React 在多个和调用之间正确保留 Hooks 状态的原因。解决方案是将license挂钩移动到函数的顶部,以便无论是否需要它都会被调用。不要在循环、条件或嵌套函数内调用 Hook。
2024-03-18 11:11:16 177
原创 【Antd Form】Ant Form.Item validator警告 `callback` is deprecated. Please return a promise instead
antd Form表单的validator表单校验不生效的原因, Warning: Your validator function has already return a promise.
2024-03-07 16:35:14 150
原创 【dva】dva的Loading讲解
这个的作用是排除Verify这个model对loading的影响,比如我不想在这个model对应的页面出现loading,可以在这里处理。每个页面中将loading状态作为属性传入组件,在进行样式处理,比如转圈圈或者显示正在加载什么的,但是重点是,我们的app有多个页面,每个页面都这么做,很繁琐。有了这个父级组件,那么在每个页面中加入这个父级组件,就可以实现loading,当然这个是可以在router.js中统一处理一下的。这样,在进入/admin下的每个页面,都会加载App作为父组件。
2024-03-05 17:24:57 625
原创 【vscode】 prettier插件不生效,格式化不生效
这种情况一般是因为插件的配置看似启动,但是却未能正确配置生效,需要将插件卸载后重装,或者重启插件并重启VScode IDE.
2024-02-27 17:20:59 210
原创 Reflect.get() 方法与直接调用 target 对象的获取属性的区别
综上所述,Reflect.get() 方法与直接调用目标对象的属性获取操作之间在错误处理、this 值、getter 方法的处理和使用方式上存在一些区别。当属性具有 getter 方法时:直接调用 target 对象的获取属性操作,如果属性具有 getter 方法,那么会调用这个 getter 方法,并返回其返回值。this 值:直接调用 target 对象的获取属性操作,获取到的属性值中的 this 值是 target 对象本身。
2024-02-20 11:48:47 226
原创 vue3中,ref()、reactive()、computed()、watch() 和 watchEffect()的区别
watchEffect():watchEffect() 函数也用于监听响应式数据的变化,但它更像是一个自动运行的副作用。总结起来,ref() 用于创建简单的响应式数据,reactive() 用于创建复杂的响应式对象,computed() 用于创建计算属性,watch() 用于监听特定数据的变化并执行回调函数,而 watchEffect() 则可以在函数中使用响应式数据并自动追踪数据的变化。watch():watch() 函数用于监听一个响应式数据的变化,并在数据变化时执行指定的回调函数。
2024-02-20 10:17:04 1284 1
原创 【react】react中和vue中的provide/inject、context写法示例
在 React 中,provide和inject的功能类似于 Vue.js 中的provide和inject。它们都是用于跨组件层次传递数据的。在 React 中,没有内置的provide和inject函数。但是,你可以使用 React 的 Context 来实现类似的功能。Context 是 React 提供的一种机制,用于在组件树中共享数据。通过创建一个 Context 对象,可以将数据传递给子组件,无论组件层次有多深,子组件都可以通过或者Consumer来访问这些数据。上述示例中,
2024-02-19 15:43:05 690
原创 【DBeaver+mysql】如何在DBeaver中创建mysql服务的连接并新建数据库
1、下载安装mysql 8.0(注意,安装过程会启动mysql服务,这才是能用命令行执行node处理sql语句的关键)2、下载安装DBeaver数据库管理IDE3、在DBeaver中新建mysql数据库4、填写连接参数。
2024-02-18 15:49:50 520
原创 【npm】npm镜像源及命令
npm config set registry https://registry.npmmirror.com (新版)
2024-02-18 14:48:21 489
原创 【node】node 程序如何生成桌面可执行文件
要将 Node.js 程序打包为桌面可执行文件,你可以使用一些工具来实现,其中最流行的工具之一是pkg。pkg可以将 Node.js 代码打包成可在不同操作系统上运行的可执行文件,而无需安装 Node.js。
2024-02-18 14:42:21 441
原创 【googleMap】此页面无法正确加载 Google 地图
弹窗,并且地图被一层黑色的遮罩层覆盖,无法搜索也无法点击。某一天,选址组件的google地图选择窗口一打开,就提示。经过搜索,发现是key过期了,需要续费。
2024-01-19 10:02:36 600
原创 【react】记录一次react组件props依赖异步数据(setFieldsValue)后传递form给子组件,再逐层传递给孙子组件引起的未渲染异常
react祖父组件设置异步数据(setFieldsValue)后传递form给子组件,再逐层传递给孙子组件引起的未渲染异常,孙子组件如果不设置useEffect和useState去监听value的值进行重渲染,会出现获取得到value最新值,但是不进行渲染的异常。
2024-01-16 19:22:22 980
原创 【antd】如何借助antd Form实现自定义表单校验(模拟antd校验效果)
在以上基础上,再次假设我们有一个地址组件(就是我们上面提到的,被暴露出来的组件之一,取名为area.js),需要选择省市区并填写详细地址。假设,我们有一个通用渲染组件,可以渲染多种表单项,但每次仅渲染一个,取名为RenderOne。正是在RenderOne中,他还有一个父级组件CompRender使用。组件,并且在address下面再定义一个。,我们注意到有一个用来自定义校验规则的。以上在Form.Item标签属性中。并写入详细地址输入框组件。
2023-12-22 10:37:26 1676
原创 Element type is invalid: expected a string (for built-in components) or a class/function but got:nul
Uncaught Error: Invariant Violation: Element type is invalid: expecteda string (for built-in components) or a class/function but got:undefined————————————————版权声明:本文为CSDN博主「hzxOnlineOk」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.ne
2023-12-13 20:22:10 749
转载 【git】LF will be replaced by CRLF the next time Git touches it 或 warning: LF will be replaced by CRLF
简单来说,设置 core.autocrlf=true 后,git 会认为工作区的文件都应该用 CRLF 来换行,如果工作区因为新增或编辑出现了 LF 换行符的文件,git add 这些文件时,发现准备提交的文件是 LF 作为换行符,就会出现这个警告,并提示哪些文件是 LF 换行的(但 git 不会对工作区这些文件做换行符的转换)首先,警告产生的原因是 git 的 core.autocrlf 配置为 true 时,git add 发现了需要提交的内容存在 LF 换行符,如下图。
2023-12-13 10:06:26 326
原创 【npm】npm中classnames包是干嘛的
属性来指定,通常情况下我们需要根据组件的状态或属性值动态地改变其样式类。如果使用字符串拼接方式来实现,这样做的代码将会变得非常冗长,同时也容易出现错误。它支持在不同情况下动态添加或删除样式类,同时还支持接受不同形式的参数,包括字符串、对象、数组等,从而实现更加灵活的功能。是一个 JavaScript 库,提供了一个简单的方式来合并不同的样式类字符串,常用于 React 项目中。这样就可以根据组件的属性值动态生成不同的样式类了。则是一个由动态样式类组成的对象,如果组件的。函数来生成具有不同样式类的字符串。
2023-12-06 14:19:48 660
原创 【react hook】ahook的useThrottleEffect 是干嘛的
的作用是限制副作用函数的执行频率,以避免过度频繁的触发。它会在指定的时间内只执行一次副作用函数,并且对于在该时间间隔内的多次触发,只有最后一次会生效。的优点是可以避免因为频繁触发副作用函数而对性能产生负面影响,同时保留了对副作用函数的实时反应能力。是 React Hooks 中的一个自定义 Hook,用于创建具有节流效果的副作用函数。用来限制副作用函数的执行频率为每秒一次。在 React 组件中,副作用函数通常在组件生命周期方法中执行,如。而使用 Hooks 时,副作用函数可以使用。
2023-12-06 14:17:31 446
原创 【js】如何在不指定具体属性名,而是通过变量获取属性名,设置一个对象中多层级下的某个属性的值
如果属性变量和属性值都是动态生成的,上述方式可以灵活设置深层对象的任意属性值。如果需要设置多个对象的属性,可以将上述代码作为一个函数,传入需要操作的对象和属性等参数,以减少代码重复。这种方式可以避免不必要的代码重复,并且使代码更易于扩展和维护。为了优化这种赋值方式,可以考虑使用ES6的解构和展开运算符。上述代码中,我们先定义了一个空的对象。属性初始化为空对象;属性初始化为空对象;属性,如果不存在则将。属性,如果不存在则将。
2023-11-30 20:28:52 417
原创 【Antd】antd的Form表单项用Form.Item包裹后,表单校验不生效的原因及解决办法
包裹住了,这会导致无法被Form表单识别并抓取,因为Form默认只允许放一个子元素。的样式,起到和内部放置div一样的效果,可以认为。这时候我们应该增加一个。
2023-11-22 20:57:52 908
原创 【react hook】react hook组件中,在forEach中使用async/awati进行异步操作,为什么后面代码没有等待直接同步运行了呢?
这是因为forEach方法不会等待异步操作的完成。forEach方法是一种同步的方法,它会在每个迭代内部同步执行一个回调函数。当遇到await时,会立即暂停执行,但是forEach方法不会等待回调函数中的await异步操作完成,而是立即执行下一个循环。在这个例子中,使用forEach方法来遍历并异步请求数据,然后将请求到的数据添加到result数组中。最后,将result数组通过setData设置为data的状态。然而,这个代码并不能达到我们的预期。原因是forEach。
2023-11-10 19:27:07 674
原创 【react hook】在react hook组件中,使用Antd Table组件,columns数据异步获取,list数据更新但没有rerender解决办法
其中,a属性是一个数组,这意味着无法在第二个useEffect中直接指定datasource作为依赖项,因为它是浅比较的,需要使用JSON.stringify(datasource)作为依赖,检测字符串长度是否发现变化。并且因为以上的案例,我们发现数据虽然打印出来更新了,但是却没有触发rerender,导致columns的数据仍旧是上一次的,这时,我们需要再增加一个状态,用来提示更新。
2023-11-10 14:43:34 625
原创 【eslint】eslint注释大全
这些注释语法可以用于去除特定代码段的ESLint检查或禁用特定规则。但请注意,在使用注释禁用规则时,要谨慎并确保了解规则的含义以及禁用规则的影响。过度禁用ESLint规则可能会导致代码质量问题。希望这些示例能帮助到你使用ESLint注释。如需进一步了解ESLint的详细配置和规则,请参考ESLint官方文档。如果您有任何疑问,请随时提问。在代码中使用ESLint注释时,可以使用不同的注释方式来处理代码规则的例外情况或禁用特定的规则。这样可以避免在整个代码块中禁用规则。这将禁用所有规则并允许代码运行。
2023-11-10 14:11:51 662
原创 【AMap】高德地图获取定位报错:INVALID_USER_SCODE(无效用户代码)
添加成功后,可获取到key值和安全密钥jscode(自2021年12月02日升级,升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)注意:此次升级不会影响之前已获得 key 的使用;升级之后的新增的key必须要配备安全密钥一起使用,具体用法请您参看下文《JSAPI key和安全。
2023-11-09 13:59:51 1545
原创 【react】在react中祖父、父亲、孙子组件层层解构其余属性props时报错children.forEach is not function
由于地址组件本身存在options,此时父组件又传递…otherProps,且解构了父级组件的otherProps,其中others解构后的属性就有options,因此产生了属性冲突,导致属性options被覆盖。
2023-11-07 16:24:57 149
原创 【Antd】如何在antd的Form组件中,将2个Input组件都放在同一个<Form.Item>标签中
【代码】【Antd】如何在antd的Form组件中,将2个Input组件都放在同一个标签中。
2023-11-07 16:20:12 237
原创 【前端工作提效】关于工作提效的一点实践与思考
3、开发人员之间没有充分沟通,容易造成信息不同步,比如开发分支从dev切到test,再从test切到uat,再从uat至release线上分支,如果不同步,可能会造成代码管理提交混乱。1、测试提的BUG是一个一个提的,如果顺着测试提供的BUG单去一个一个解决问题,那么很容易管中窥豹,就像打补丁一样,缝缝补补,没有办法从根源去解决问题。2、开发需求前,要将需求仔仔细细的过一遍,尽量将需求逐一了解清楚,开发过程中遇到的一些疑惑或者有矛盾的点,及时找到相关人员进行沟通解决。
2023-11-02 11:56:38 172
原创 【antd】form表单为空校验失效 form.item.rules传入非所需的api属性时,引起为空自动验证失效问题
传入非所需的api属性时,引起为空自动验证失效问题。设置后,在form表单项为空时,不提醒。(正常现象),当开始输入后,马上触发了。组件所需的api属性,防止验证失效。为空校验,但此时表担心。
2023-10-24 18:59:13 402
转载 【typescript】ts 之 Pick 和 Omit 的用法和区别
Omit 与 Pick 作用相似,只不过 Omit 是:以一个类型为基础支持剔除某些属性,然后返回一个新类型。主要的逻辑就是如何利用泛型和联合类型,来动态的从一个已知的类型中,提取出它的子集。从类型定义的属性中,选取指定一组属性,返回一个新的类型定义。主要是从一个已知的类型中,取出子集,作为一个新的类型返回。用来获取 T 类型的所有键的联合类型。
2023-09-27 16:24:54 312
原创 【css】如何实现自定义滚动悬浮置顶、固定表头
到一个元素时,如果内容超出容器的尺寸,则会显示一个滚动条。与 scroll 不同的是,滚动条是以浮动的方式显示在内容上方,不会占用容器的空间。当应用于元素时,该元素在滚动时会固定在父容器的指定位置,直到滚动到达特定的位置或条件满足后,才会取消固定定位。这意味着,即使内容超出容器的高度,也不会显示滚动条或剪裁溢出的部分。:内容超出容器高度时,会根据需要设置是否显示滚动条,如果内容没有超出容器高度则不显示滚动条。:如果内容超出容器的高度,将显示滚动条,用户可以滚动查看超出的内容。:溢出的内容将被隐藏,不显示。
2023-09-21 11:00:23 2207
原创 【浏览器】主流浏览器伪元素一览
需要注意的是,随着各个浏览器版本的更新,对于伪元素的支持和使用情况也可能发生变化。如果您要使用伪元素,请务必进行兼容性测试,并针对不同浏览器版本进行适配。推荐使用 CSS 的特性检测或媒体查询等方法,以确保在不同浏览器中都能正常显示所需效果。不同浏览器对于伪元素的支持程度可能会有所差异。
2023-09-20 19:46:39 156
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人