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

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

一、依赖安装报错

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循环的最外层的元素上,否则会报错。

四、结语:

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


相关文章
|
7月前
|
前端开发 JavaScript API
前端开发人员的日期时间管理大师Top3
日期时间处理工具怎么选?看这篇就够啦!
103 0
前端开发人员的日期时间管理大师Top3
|
4月前
|
前端开发 UED
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
41 0
|
6月前
|
Web App开发 存储 前端开发
技术心得记录:前端面试题汇总
技术心得记录:前端面试题汇总
|
6月前
|
存储 缓存 移动开发
前端开发中常用的存储方法(带解析)
前端存储方法包括Cookie、localStorage、sessionStorage、IndexedDB和已废弃的WebSQL。Cookie用于存储小量数据,每次请求时发送到服务器,可设置过期时间。localStorage和sessionStorage都是HTML5提供的,前者数据永久存储,后者会话关闭后清除。IndexedDB是存储大量结构化数据的数据库,支持索引和事务。WebSQL已废弃,但部分浏览器仍支持。Cache Storage用于缓存响应,提高离线访问性能,通过Service Worker控制。
|
7月前
|
前端开发 JavaScript 小程序
系统刷JavaScripit 构建前端体系(语法篇)
系统刷JavaScripit 构建前端体系(语法篇)
|
存储 移动开发 前端开发
【React工作记录九十四】前端小知识点扫盲笔记记录3
【React工作记录九十四】前端小知识点扫盲笔记记录3
87 0
|
7月前
|
存储 缓存 前端开发
中高级前端工程师都需要熟悉的技能--前端缓存
中高级前端工程师都需要熟悉的技能--前端缓存
|
Web App开发 存储 缓存
前端(一)——前端开发遇到的普遍问题以及解决策略
前端(一)——前端开发遇到的普遍问题以及解决策略
223 2
|
域名解析 缓存 前端开发
【React工作记录一百】前端小知识点扫盲笔记记录5
【React工作记录一百】前端小知识点扫盲笔记记录5
69 0