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

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

一、依赖安装报错

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

四、结语:

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


相关文章
|
30天前
|
前端开发 UED
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
27 0
|
3月前
|
Web App开发 存储 前端开发
技术心得记录:前端面试题汇总
技术心得记录:前端面试题汇总
|
3月前
|
存储 缓存 移动开发
前端开发中常用的存储方法(带解析)
前端存储方法包括Cookie、localStorage、sessionStorage、IndexedDB和已废弃的WebSQL。Cookie用于存储小量数据,每次请求时发送到服务器,可设置过期时间。localStorage和sessionStorage都是HTML5提供的,前者数据永久存储,后者会话关闭后清除。IndexedDB是存储大量结构化数据的数据库,支持索引和事务。WebSQL已废弃,但部分浏览器仍支持。Cache Storage用于缓存响应,提高离线访问性能,通过Service Worker控制。
|
4月前
|
移动开发 前端开发 HTML5
探索前端开发中的可访问性优化技巧
在当今互联网时代,前端开发的重要性日益凸显。然而,我们常常忽视了一个重要的方面:可访问性。本文将深入探讨如何通过优化前端代码来提高网站和应用程序的可访问性,使其能够更好地为各类用户提供良好的浏览体验。
|
10月前
|
移动开发 前端开发 小程序
2018年工作年度总结(前端开发)
2018年工作年度总结(前端开发)
31 0
|
Web App开发 存储 缓存
前端(一)——前端开发遇到的普遍问题以及解决策略
前端(一)——前端开发遇到的普遍问题以及解决策略
169 2
|
域名解析 缓存 前端开发
【React工作记录一百】前端小知识点扫盲笔记记录5
【React工作记录一百】前端小知识点扫盲笔记记录5
62 0
|
缓存 JavaScript 前端开发
前端开发中数据的处理和渲染
前端开发中,对于数据的处理和渲染是非常重要的一环。Vue.js作为一个流行的前端框架,提供了一套完善的响应式数据绑定机制和DOM更新算法,使得数据和视图的绑定更加简单高效。在Vue.js中,我们可以使用计算属性(Computed)和监听器(Watcher)来处理数据,实现数据的实时更新和渲染。
153 0
|
存储 SQL Web App开发
【前端工程师】总结一下前端存储
【前端工程师】总结一下前端存储
112 0
【前端工程师】总结一下前端存储