前端开发的一些小问题记录

简介: 开发过程中遇到的一些小问题记录。

一、依赖安装报错

1、unexpected error occurred:xxxx

解决方案

将yarn.lock删除,重新运行yarn install

二、antd相关问题

Form

1、Warning: getFieldDecorator will override value, so please don't set value directly and use setFieldsValue to set it.

原因分析

被设置了name属性的Form.Item包装的控件,表单控件会自动添加value,不能用控件的value来直接设置表单域的值。

解决办法

将控件中的value属性删除。

默认值可以用Form里的initialValue来设置,用setFieldsValue来动态更新。

这样就没有警告了。

2、Warning: You cannot set a form field before rendering a field associated with the value

原因分析

setFieldsValue这个方法里面传值的时候只能是form中用到的参数(即是getFieldDecorator方法中的field),没有的field一律不允许多传,否则就会报错。

解决办法

setFieldsValue严格使用form中name值。

Table

1、Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

原因分析

Table组件,未设置rowKey属性或者所设置的值中含有undefined(后台返回字段缺失)或者所设置的值中有重复值。

解决办法

知识点:rowKey可以是字符串或一个函数。

方法一

和后台沟通,确保设置的rowKey属性对应的字段的值一定会返回且唯一

   rowKey="applyId"    

   rowSelection={rowSelection}  

   columns={columns}  

   dataSource={data}  

方法二

将rowKey设置为index

   rowKey={(record,index) = index}  

   rowSelection={rowSelection}  

   columns={columns}  

   dataSource={data}  

三、开发相关问题

1、axios请求,浏览器接口返回值是object格式,可代码实际取到的值却是string

解决方案

检查object,看其格式是否准确。因为axios对格式要求很严格,所以可能是json格式问题导致的。

2、Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

原因分析

不能在组件销毁后设置state。

对某个API提交了一个异步请求,组件在收到响应前就被卸载了,收到响应之后调用了setState()企图更新state,但这个时候组件早就被卸载了。

为组件添加了监听事件,但是没有在componentWillUnmount()里移除这个监听事件,当组件移除以后监听的事件被触发。

在类似于setInterval()的函数里调用了setState(),但是没有在componentWillUnmount()里移除这些函数。

解决办法

应该在组件销毁时将异步请求撤销。

取消componentwillunmount方法中的所有订阅和异步任务。

阻止异步操作

componentWillUnmount() {

 this.setState = (state, callback) = {

   return

 }

}

清除定时

var timer;

componentDidMount = () ={

    timer = setTimeout(() = {

       this.setState({data:123456789})

   },5000)

}

componentWillUnMount = () ={

   if(timer){

       clearTimeout(timer)

   }  

3、Warning: Each child in a list should have a unique "key" prop.

原因分析

react的key涉及到react的diff算法,进行diff对比时 没有key值或者key值不唯一,会报错警告。

解决办法

在React里,当用map做循环渲染的时候,需要给渲染出的每一项增加一个key值,且key值每一项都应该不同。

key的赋值写在map循环的最外层的元素上,否则会报错。

四、结语:

有不妥的地方欢迎大家指出~


相关文章
|
JavaScript 前端开发
vue element plus Switch 开关
vue element plus Switch 开关
598 0
|
4月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
427 12
五分钟带你玩转sonar(五)教你使用SonarLint插件
五分钟带你玩转sonar(五)教你使用SonarLint插件
5150 0
五分钟带你玩转sonar(五)教你使用SonarLint插件
|
JavaScript 前端开发 jenkins
【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案
【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案
3122 0
|
11月前
|
JSON JavaScript 测试技术
Postman 使用教程:从基础到高级
Postman是一款强大的API开发和测试工具,支持从基础请求发送到复杂API集成。本文详细介绍了Postman的基础使用,包括安装、界面概览、发送请求、设置请求头等,以及高级功能,如使用环境变量、创建请求集合、编写测试脚本及使用Newman进行命令行测试,帮助用户全面掌握Postman的使用技巧。
4305 28
Postman 使用教程:从基础到高级
|
前端开发 索引
解决React报错Encountered two children with the same key
解决React报错Encountered two children with the same key
ElementUI 为 DatePicker 日期选择器组件添加前缀说明文字
当我们使用 ElementUI 构建表单页面的时候,经常需要使用到复合型输入框,可前置或后置元素,一般为标签或按钮,作为该输入框的说明性文字。
1463 0
ElementUI 为 DatePicker 日期选择器组件添加前缀说明文字
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
1253 0
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
编解码 测试技术 API
模拟手机设备:使用 Playwright 实现移动端自动化测试
本文介绍了使用Python的Playwright库进行移动设备模拟和自动化测试的方法。通过Playwright,开发者能模拟不同设备的硬件和软件特性,如屏幕尺寸、用户代理,以确保网站在移动设备上的表现。示例代码展示了如何模拟iPhone X并访问网站,之后可在此基础上编写测试代码以检验响应式布局和交互功能。Playwright的设备参数注册表支持多种设备,简化了移动端自动化测试的流程。